icon
icon

HTMLでコピーライト記号©を表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでコピーライト記号©を表示する方法について解説しています。コピーライト記号は著作権表示に使用されるマークになります。コピーライト記号を使う場面と、文字実体参照によるコピーライト記号の表記の方法を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

HTMLでコピーライト記号©を表示する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

コピーライト記号©を表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

コピーライト記号とは

コピーライト記号とは「©」と表示され、著作権を表明するための簡略化された記号です。

この記号に続けて、著作物が作られた年と、著作権の所有者である団体や個人の名称(屋号)を記述します。

コピーライトの表記はWebサイトの最下部に記されていることが多く、もはや1つの慣習として表記しているケースがほとんどです。

ちなみに、現在ご覧になっているテックアカデミーマガジンのコピーライト表記は以下の通りです。

注意点として、コピーライト記号「©」が特殊文字のため、HTMLにそのまま記述すると文字化けを起こす場合があります。

特殊文字の思わぬ文字化けを防止するために、記号部分を「実体参照」として記述する方法があります。

 

実体参照とは

実体参照とは、HTMLにそのまま記述すると文字化けを起こす可能性のある特殊文字を、ブラウザで問題なく表示させるために使用される書き方です。

実体参照には「文字実体参照」と「数値文字参照」の2種類がありますが、以降のコピーライト記号を表示する方法では「文字実体参照」を使用して説明します。

実体参照の表記ルールとしては、「&」から始まり「;」で終わる連続した文字列になっています。

 

[PR] Webデザインで副業する方法とは

HTMLでコピーライト記号を表示する方法

文字コードの確認

まずは、HTMLに定義されてある文字コードを確認しておきましょう。

headタグ内のメタ情報に以下の記述があるか確認します。

<meta charset="utf-8">

上記のように文字コードの種類が「utf-8」の場合は、実体参照の記述を用いなくても、コピーライト記号などの特殊記号は表示できます。

 

逆に、以下のように文字コードの種類がutf-8以外であった場合、特殊記号を用いると文字化けを起こします。

<meta charset="euc-jp">

いかなる文字コードの場合でも特殊記号が正常に表示されるよう、実体参照を使用して記述しておけば安心です。

 

コピーライト記号を表示してみよう

コピーライト記号は実体参照を使用した場合、&copy;と記述します。

以下は、コピーライトの表記例です。

See the Pen
実体参照によるコピーライト表示
by nomallica (@nomallica)
on CodePen.

 

まとめ

今回は、HTMLでコピーライト記号©を表示する方法について解説しました。

HTMLの文字コードの種類が「utf-8」の場合は「©」をそのまま記述しても表示はされますが、文字コードの変換が起こった場合などに文字化けが起こらないよう、実態参照を用いて記述しておくと安心です。

実体参照は「&」から始まり「;」で終わる連続した文字列です。

コピーライト以外にも「&」や「<」などのソースコードに使われる文字をそのまま表示したい時にも実体参照はよく用いられていますので、表示したい内容によって適宜取り入れていきましょう。

 

大石ゆかり

内容が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!