catnose
catnose
HTMLの<cite>タグは、引用された作品のタイトル（作品名や題名）を表します。例えば本の紹介をするときには、本のタイトルを<cite>で囲みます。
<p>私のお気に入りの小説は<cite>指輪物語</cite>です。</p>
これにより読者や検索エンジンのクローラーなどに対して「この部分が引用した作品名だよ」と伝えることができます。
😺主要ブラウザのデフォルトのスタイルでは<cite>内のテキストは斜体で表示されます。
citeタグの使い方
<cite>タグ内に入るのは、以下のような作品のタイトルです。作品らしい作品だけでなく、展示会などのイベントや、訴訟レポートなどの公的な書類に対しても使うことができます。
📘 書籍、論文、エッセイ、詩
🎹 楽譜、曲
✏️ 脚本
🎥 映画、TV番組
🖥 Webサイト、プログラム、サービス
🎮 ゲーム
🗿 彫刻
🏞 絵画
💃 演劇、ミュージカル、オペラ
🏢 展示会、イベント
📄 訴訟レポート
など
引用文の出典として使われる
<cite>タグは、引用文を表す<blockquote>タグと合わせてよく使われます。
<p>私の好きな<cite>フォレスト・ガンプ</cite>という映画に次のような言葉が出てきます。</p>
<blockquote>
<p>人生はチョコレートの箱、開けてみるまで中身は分からない</p>
</blockquote>
👆引用文の出典を示すような形で<cite>を使うわけですね。<blockquote>と<cite>を合わせて使う方法は下記リンク先でより詳しく解説しています。
単純に作品名を書くときに使ってもOK
引用文を載せずに「作品名だけを紹介したい」というような場合に使うこともできます。
<h2>好きな映画ベスト5</h2>
<ol>
<li><cite>レオン</cite>（1995）</li>
<li><cite>インセプション</cite>（2010）</li>
<li><cite>ゴッドファーザー</cite>（1972）</li>
<li><cite>インターステラー</cite>（1995）</li>
<li><cite>となりのトトロ</cite>（1988）</li>
</ol>
👆このようにリスト内で使うこともできます。
🙅引用文自体を含めない
<cite>に引用文自体を入れることはできません。作品タイトルだけを入れるようにしましょう。
<!-- 👎ダメな例 -->
<p>私の好きな<cite>フォレスト・ガンプには
「人生はチョコレートの箱、開けてみるまで中身は分からない」</cite>
というセリフが登場します。</p>
<!-- 👍良い例 -->
<p>私の好きな<cite>フォレスト・ガンプ</cite>には
<q>人生はチョコレートの箱、開けてみるまで中身は分からない</q>
というセリフが登場します。</p>
👆ちなみに段落文に引用を含める場合には<blockquote>ではなく<q>タグを使います。
🙅人の名前を含めない
WHATWGの仕様書には以下のように書かれています。
人名は作品のタイトルではない（たとえ人々がその人を作品の一部とみなしたとしても）。
そのため、cite要素を人名をマークアップするために使用してはいけない。
つまり、偉人の名言を引用するときに<cite>偉人の名前</cite>とするのは好ましくありません。偉人の名言が記載されている作品名（伝記のタイトルなど）を<cite>に含めるか、単純に<span>タグを使うのが良いでしょう。
CSSでciteの斜体フォントを変える
主要ブラウザでは<cite>はデフォルトで斜体文字で表示されます。このスタイルはCSSで簡単に変えることができます。例えば、斜体フォントをやめて太字にするサンプルコードを紹介します。
cite {
font-style: normal; /* 斜体を解除 */
font-weight: bold; /* 太字に */
}