citeタグ -出典や作品のタイトルを示す｜HTML辞典
<cite>タグとは？
<cite>タグは、HTML文書内で「出典（引用元）」や「作品のタイトル」を示すためのタグです。
デフォルトではイタリック（斜体）で表示されますが、あくまで意味的なマークアップであり、視覚的な装飾が目的ではありません。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、引用元の著者名や作品名を示すために使用されます。
閉じタグの有無
<cite>は開始タグ（<cite>）と閉じタグ（</cite>）の両方が必要です。
基本的な記述方法
<cite> を使用すると、テキストがイタリック体で表示され、出典を明示できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>citeタグの例</title>
</head>
<body>
<p>「<cite>星の王子さま</cite>」はサン＝テグジュペリによって書かれた名作です。</p>
<blockquote>
"本当に大切なものは目に見えないんだ。"
</blockquote>
<p><cite>― 星の王子さま</cite></p>
</body>
</html>ポイント：
<cite>は書籍・映画・音楽・論文などの「作品のタイトル」を示す際に使う。- 著者名の記述にも使われるが、人物の名前単独ではなく、作品とともに記載するのが適切。
- デフォルトではイタリック体で表示されるが、CSSで変更可能。
使用できる主な属性
<cite>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <cite class="source">...</cite> |
id | 一意の識別子を設定 | <cite id="book-title">...</cite> |
style | インラインスタイルを適用 | <cite style="color: gray;">...</cite> |
CSSを使ったデザイン変更
<cite> のデフォルトのイタリックスタイルを変更したい場合、CSSを活用できます。
✅ カスタムスタイルの適用
cite {
font-style: normal;
color: #555;
}<p><cite>星の王子さま</cite> はフランス文学の名作です。</p><cite> の適切な使用例
✅ 作品のタイトルを明示
書籍、映画、音楽、芸術作品などのタイトルを示すのに適切です。
<p>私は <cite>ロミオとジュリエット</cite> を読んだことがあります。</p>✅ 論文や記事の出典を示す
学術論文やWeb記事の出典を示す場合にも使用できます。
<p>この理論は <cite>相対性理論</cite> に基づいています。</p>✅ 著者名とともに使用
著者名だけでなく、作品名と一緒に記述するのが適切です。
<p><cite>風立ちぬ</cite> は堀辰雄による作品です。</p><cite> の適切でない使用例（誤った使い方）
❌ 単なる強調目的で使用するのはNG
作品のタイトルではなく、ただの強調目的なら <strong> や <em> を使うのが適切です
<!-- NG：作品のタイトルではなく、単なる強調として使用 -->
<p>この映画は <cite>とても面白い</cite> です。</p>✅ 正しい書き方（<strong> を使用）
<p>この映画は <strong>とても面白い</strong> です。</p>❌ Webサイトや企業名には使用しない
企業名やWebサイトの名称は作品ではないため、<cite> を使うのは不適切です。
<!-- NG：Webサイト名に <cite> を使用 -->
<p>詳細は <cite>Wikipedia</cite> を参照してください。</p>✅ 正しい書き方（そのままテキストとして記述）
<p>詳細は Wikipedia を参照してください。</p>✅ 正しい書き方（リンクを使用）
<p>詳細は <a href="https://ja.wikipedia.org/">Wikipedia</a> を参照してください。</p><cite> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<cite> | 作品のタイトルや出典を示す | イタリック（デフォルト） | あり（SEOに影響） |
<em> | 文章内で重要な部分を強調 | 斜体（デフォルト） | あり（SEOに影響） |
<strong> | 意味的に重要な部分を強調 | 太字（デフォルト） | あり（SEOに影響） |
使用上の注意点
✅ 出典や作品のタイトルにのみ使用する
- 単なるテキストの強調ではなく、作品や出典の明示に使うのが適切。
- 論文や記事のタイトルを示す際にも有効。
✅ Webサイトや企業名には使用しない
- Webサイト名や会社名には
<cite>を使わず、通常のテキストとして扱う。 - 必要なら
<a>を使ってリンクを設定するのが適切。
関連タグ
<blockquote>– 長い引用（段落単位）<q>– 短い引用（インライン）<em>– 文章の意味的な強調（斜体）<i>– 装飾目的の斜体<span>– インライン要素のグループ化（カスタムスタイル適用に便利）
まとめ
<cite>タグは、HTML文書内で出典（引用元）や作品のタイトルを示すためのタグ です。
書籍・映画・音楽・論文などのタイトルを明示する際に使用し、SEOにも影響を与えることがあります。
単なる強調目的やWebサイト名には使用せず、適切な意味を持たせて使うことが推奨されます。
