HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLで著作権記号(©)を挿入する方法|実体参照とショートカットキー徹底解説

HTMLの著作権記号とは?

HTMLにおける著作権記号は、©(実体名)または ©(実体番号)というコードで表されます。これらのコードを使うことで、Webページに©マークを簡単に埋め込むことができます。ほとんどのキーボードには著作権記号のキーが用意されていないため、HTMLの特殊文字コードを利用する必要があります。

そもそもキーボードには、コンピュータで使える何百種類もの記号をすべて割り当てることができません。そこでHTMLでは「文字実体参照」という仕組みが用意されており、キーボードに存在しない特殊文字でもコードを書くだけで表示できるようになっています。

この記事では、HTMLで著作権記号を作成するさまざまな方法を、具体例とともにわかりやすく解説します。

著作権記号の基本的な使い方

HTMLで著作権記号を表示するには、&copy; または &#169; を使用します。多くの場合、段落タグ(<p>)の中に記述します。先頭の「&(アンパサンド)」は、特殊文字を埋め込むことをブラウザに伝える役割を持っています。

基本の構文は以下の通りです。

<p>© 2020 Career Karma</p>

このコードは、ブラウザ上で次のように表示されます。

© 2020 Career Karma

&#169; を使っても同じ結果が得られます。どちらの書き方でも、アンパサンド(&)とセミコロン(;)は必ずセットで指定してください。片方でも欠けると、著作権記号は正しく表示されません。&copy; と &#169; は特別なHTML文字として扱われるためです。

なぜ著作権表示が必要なのか

Webページを作成する際は、自分が制作したコンテンツの所有権を明示しておくことをおすすめします。これにより、作品に対して一定の法的保護を受けられる可能性があります。具体的には、サイトのフッター部分に著作権表示を設置し、自分やクライアントのコンテンツを保護しましょう。著作権記号を使えば、所有権の主張を訪問者により明確に伝えることができます。

著作権記号の書き方一覧

HTMLで著作権記号を作成する主な方法を、下の表にまとめました。

方法ショートカット / 構文
Windows(直接入力)Alt + 0169
Mac(直接入力)Option + G
HTML実体名&copy;
HTML実体番号&#169;

WindowsやMacでは、記号そのものを直接入力するためのショートカットも用意されています。Windowsでは「Alt + 0169」、Macでは「Option + G」を押すだけで、©を入力できます。

一方、HTMLの実体名・実体番号を使う方法なら、環境に依存せず確実に表示できるのがメリットです。必要に応じて <span> タグで囲み、色やサイズなどのスタイルを適用することもできます。

フッターでの使用例

著作権記号がよく使われる場所のひとつが、ページのフッターです。ここでは、フッターに表示される著作権表示のシンプルな例を見てみましょう。

<footer>
  <p>Created by Career Karma. © 2020</p>
</footer>

このコードでは、<footer> タグによって「ここがWebページのフッターである」ことを定義しています。フッター内の <p> タグには、テキストと著作権記号が含まれています。実際の表示結果は以下の通りです。

Created by Career Karma. © 2020

これで、著作権記号を正しく表示できました。

完全なサンプルコード

最後に、著作権記号を含む完全なHTMLサンプルを紹介します。コピペしてそのまま動作を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Copyright Symbol Sample</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 15px;
      }
      table, footer {
        margin: 20px auto;
        text-align: center;
      }
      tr:nth-child(even) {
        background-color: #dddddd;
      }
      span {
        color: blue;
      }
    </style>
    <script>
      function todayDate(){
        var d = new Date();
        var n = d.getFullYear() + " ";
        document.getElementById("date").innerHTML = n;
      }
    </script>
  </head>
  <body onload="todayDate()">
    <table>
      <tr>
        <th>方法</th>
        <th>ショートカット / 構文</th>
      </tr>
      <tr>
        <td>Windows</td>
        <td>Alt + 0169</td>
      </tr>
      <tr>
        <td>Mac</td>
        <td>Option + G</td>
      </tr>
      <tr>
        <td>HTML実体名</td>
        <td><span>&amp;copy;</span></td>
      </tr>
      <tr>
        <td>HTML実体番号</td>
        <td><span>&amp;#169;</span></td>
      </tr>
    </table>
    <footer>
      &copy; <em id="date"></em>Career Karma
    </footer>
  </body>
</html>

このサンプルでは、フッター部分で著作権記号(&copy;)を使用し、JavaScriptで現在の年を自動的に取得して表示しています。紹介した複数の方法を実際に試して、自分のプロジェクトに合ったやり方を見つけてください。

まとめ

HTMLの著作権記号は、&copy; または &#169; で表現できます。キーボードに©のキーがなくても、これらの実体参照を使えば、どの環境でも確実にWebページへ著作権記号を埋め込むことが可能です。

HTMLの学習をさらに深めたい方は、「HTML学習ガイド」もぜひ参考にしてください。初心者向けの効果的な学習ステップや、おすすめのオンライン学習リソースを多数紹介しています。

  1. HTMLのcanvasタグとは？使い方とサンプルコードで学ぶ図形描画の基礎

    HTMLのcanvasタグとは HTMLの<canvas>タグは、Webページ上にグラフィックを描画するための要素です。canvas自体は描画領域を確保するだけのため、実際に図形やアニメーションを描くにはJavaScriptなどのスクリプト言語と組み合わせて使用します。このタグはHTML5で新たに導入され、チャートの表示やゲーム開発、画像処理など、さまざまな場面で活用されています。 canvas要素には、描画領域のサイズを指定するための2つの属性があります。 height − キャンバスの高さ（ピクセル単位） width − キャンバスの幅（ピクセル単位） それでは、HTMLで

  2. HTML Window outerWidthプロパティの使い方を解説

    HTMLのWindow outerWidthプロパティは、ツールバーやタブ、スクロールバーなど、すべてのインターフェース要素を含むブラウザウィンドウ全体の幅を取得するプロパティです。戻り値はピクセル単位の整数で、読み取り専用となります。 構文 outerWidthプロパティの基本構文は次の通りです。 window.outerWidth なお、outerWidthはビューポート(コンテンツ表示領域)のみの幅を返すinnerWidthプロパティとは異なり、ウィンドウ外枠も含めた値を返します。用途に応じて使い分けるとよいでしょう。 使用例 それでは、実際にボタンをクリックしてブラウザウィンドウの幅を