HTML: HTML見出し
見出しタグはコンテンツに明確な階層を与え、ユーザー体験と検索エンジンの両方にとって重要です。
1. 見出しタグとは
HTMLは <h1> から <h6> までの6レベルの見出しタグを提供します。<h1> が最上位（最も重要）で、<h6> が最下位（最も重要度が低い）を表します。見出しタグはデフォルトで太字で表示され、h1 から h6 に向かってフォントサイズが小さくなります。
見出しの意味論的な意味は、その見た目の表示よりもはるかに重要です。検索エンジンや支援技術（スクリーンリーダーなど）は、見出しタグを使ってページのコンテンツ構造を理解します。そのため、見出しを正しく使うことはSEO（検索エンジン最適化）とアクセシビリティにとって重要です。
▶ サンプル
<h1>レベル1の見出し（最も重要）</h1>
<h2>レベル2の見出し</h2>
<h3>レベル3の見出し</h3>
<h4>レベル4の見出し</h4>
<h5>レベル5の見出し</h5>
<h6>レベル6の見出し（最も重要度が低い）</h6>
上の例では、ブラウザが各見出しに自動的に異なるフォントサイズと太字のスタイルを適用しています。ただし、覚えておいてください：フォントサイズを変更するためだけに見出しタグを使ってはいけません ― テキストのスタイル制御にはCSSを使いましょう。見出しタグの役割はコンテンツの階層を伝えることです。
2. 見出しの使用ガイドライン
見出しタグの使用は簡単ですが、実際の開発ではいくつかの重要なガイドラインに従う必要があります。
- 各ページに1つの
<h1>のみ：<h1>はページの核となるトピックを表し、通常はページタイトルやサイトロゴに使用します。検索エンジンは<h1>の内容をページの主題を理解するための重要なシグナルとして使います。 - 見出しレベルをスキップしない：
<h1>から直接<h3>に飛んではいけません。レベルをスキップするとドキュメント構造の一貫性が損なわれ、SEOやアクセシビリティに悪影響を及ぼします。 - 適切な見出しの使用は検索エンジンの順位を向上させる可能性があります： 検索エンジンは見出しタグ内のキーワードを分析します。適切に構成された見出し階層は、検索エンジンがページコンテンツをよりよく理解するのに役立ち、結果として上位表示につながる可能性があります。
▶ サンプル
<!-- 正しい見出し階層 -->
<h1>サイトタイトル</h1>
<h2>記事カテゴリー</h2>
<h3>サブカテゴリー1</h3>
<h3>サブカテゴリー2</h3>
<h2>関連コンテンツ</h2>
<!-- 間違った見出し階層（レベルをスキップ） -->
<h1>サイトタイトル</h1>
<h3>h2をスキップして、直接h3を使用</h3> <!-- h2がここで欠けている -->
<h6>h3からh6に飛ぶのは飛躍しすぎ</h6>
<h6> を選んだり、大きなテキストを得るために <h1> を乱用したりしないでください。見出しの価値は構造にあり、スタイルではありません。スタイリングはCSSに任せましょう。
3. デフォルトの見出しスタイル
ブラウザには各見出しレベルに組み込みのフォントサイズと太さが設定されています。h1〜h6の実際の表示を見てみましょう。
4. h2見出し 24px / 1.5em
(1) h3見出し 18.72px / 1.17em
h4見出し 16px / 1em
h5見出し 13.28px / 0.83em h6見出し 10.72px / 0.67em
一目でわかるように、h1 が最も大きく目立ち、h6 が最も小さくなっています。これらはブラウザのデフォルトの見出しスタイルです。ブラウザ間で若干の違いはありますが、全体的な階層関係は一貫しています。
もちろん、これらのデフォルトスタイルはCSSで簡単に上書きできます。実際のプロジェクトでは、開発者は通常ブラウザのデフォルトスタイルをリセットし、デザイン仕様に基づいてフォントサイズ、色、間隔などの見出しプロパティを再定義します。
▶ サンプル
/* CSSによるカスタム見出しスタイル */
h1 { font-size: 28px; color: #333; }
h2 { font-size: 22px; color: #555; }
h3 { font-size: 18px; color: #777; }
font-size の値を確認し、リアルタイムで編集してプレビューできます。
5. 見出しとページアウトライン
ページに見出し階層を設定すると、ブラウザと検索エンジンはそのページの「目次」を生成します ― これをドキュメントアウトラインと呼びます。見出しタグはWord文書の「見出しスタイル」のように機能します。適切な見出し階層は、自動的に明確な目次構造を生成します。
スクリーンリーダーのユーザーにとって、見出し階層はページ内のナビゲーションマップです。良い見出し構造があれば、視覚障害のあるユーザーも目次を読むように各セクションにすばやくジャンプできます。見出し階層が乱れていると、ページコンテンツの構成を理解するのが難しくなります。
検索エンジンにとって、見出し内のキーワードはページのトピックを理解するための重要なシグナルです。検索エンジンは見出しタグを適切に使っているページをより高く評価します。
▶ サンプル
<!-- ブログ記事の見出しアウトライン構造 -->
<h1>フロントエンド開発の学び方</h1>
<h2>1. フロントエンドの3兄弟</h2>
<h3>HTML ― 構造</h3>
<h3>CSS ― スタイリング</h3>
<h3>JavaScript ― インタラクティブ</h3>
<h2>2. 学習パス</h2>
<h3>初心者レベル</h3>
<h3>中級者レベル</h3>
<h3>上級者レベル</h3>
<h2>3. おすすめリソース</h2>
上の例では、h1 が記事全体のトピック、h2 が3つの主要な章、h3 が各章のサブセクションを表しています。この明確な階層アウトラインにより、記事の内容が一目でわかります。
6. 見出しと意味論的タグ
HTML5では、意味論的タグ（<article>、<section>、<nav>、<aside>）と見出しタグが一緒に使われることがよくあります。各独立ブロック内では、見出し階層を外側のブロックの階層を継続するのではなく、h1 から h2 に再スタートさせる必要があります。
▶ サンプル
<body>
<h1>私のブログ</h1>
<article>
<h2>最初の記事のタイトル</h2>
<p>記事の内容...</p>
<section>
<h3>記事内のサブ見出し</h3>
<p>詳細な内容...</p>
</section>
</article>
<article>
<h2>2番目の記事のタイトル</h2>
<p>記事の内容...</p>
</article>
<aside>
<h2>著者について</h2>
<p>著者のプロフィール...</p>
</aside>
</body>
各 <article> と <aside> が独自の <h2> を持っていることに注目してください。これらは互いに独立しており、干渉しません。このアプローチは意味論的標準に準拠し、ページ構造をより明確にします。
7. よくある見出しの間違い
初心者は見出しタグを使用する際に以下のような間違いをしがちです。コードをチェックしてみてください。
| エラータイプ | 間違った例 | 正しい方法 |
|---|---|---|
| フォントサイズ目的で見出しを使用 | <h3>通常のテキスト</h3>（小さいフォントが目的） |
<p> + CSS font-size を使用 |
| 複数のh1タグ | 1ページに3つの <h1> タグ |
1つの <h1> のみを核トピックとして維持 |
| レベルのスキップ | h1 → h3 → h5 |
順番通りに使用：h1 → h2 → h3 |
| 空の見出し | <h2></h2>（テキストコンテンツなし） |
見出しには意味のあるテキストが必要 |
▶ サンプル
<!-- 間違い：テキストを小さくするためだけにh6を使用 -->
<h6>フッターの著作権情報</h6>
<!-- 正しい：著作権情報はpタグを使い、フォントサイズはCSSで制御 -->
<p style="font-size: 12px; color: #999;">© 2024 マイウェブサイト</p>
<!-- 間違い：レベルをスキップ -->
<h1>サイトタイトル</h1>
<h4>h2とh3が欠けています</h4>
<!-- 正しい：順番通りに進める -->
<h1>サイトタイトル</h1>
<h2>主要セクション</h2>
<h3>サブセクション</h3>
<!-- 間違い：1ページに複数のh1タグ -->
<h1>パート1</h1>
<h1>パート2</h1>
<!-- 正しい：h1は1つのみ。残りはh2を使用 -->
<h1>ページタイトル</h1>
<h2>パート1</h2>
<h2>パート2</h2>
❓ よくある質問
<h1>タグを使うことはできますか？<article>や<section>内に複数の<h1>を使うことが技術的には可能ですが、SEOとアクセシビリティの観点から、各ページにはコアトピックを表す<h1>を1つだけ持たせるべきです。複数の<h1>は検索エンジンを混乱させ、主要内容がどれか分からなくなります。複数の大きな見出しが必要な場合は、代わりに<h2>を使ってください。<h1>はページタイトルのようなもので、本にはタイトルが1つだけあります。<h1>から<h3>に直接飛ぶことは？h1 → h2 → h3）でなければなりません。レベルをスキップするとドキュメント構造が壊れ、スクリーンリーダーユーザーのナビゲーションに支障をきたします。スクリーンリーダーはユーザーがコンテンツを閲覧するために見出し階層に依存しており、スキップするとセクションが見逃されたと思わせます。検索エンジンもスキップされた見出しに低い重み付けをします。デフォルトのサイズが大きすぎる場合は、CSSで調整してください。見出しレベルをスキップしないでください。<h1>から<h6>のフォントサイズは固定ですか？カスタマイズできますか？<h1>から<h6>にデフォルトのサイズ（大きい方から小さい方）を設定していますが、これらはデフォルトスタイルに過ぎず、CSSでカスタマイズできますし、すべきです。見出しタグの真の価値は「セマンティクス」（コンテンツの階層関係を表現すること）にあり、「ビジュアルスタイリング」にはありません。実際のプロジェクトでは、開発者は常にデフォルトの見出しスタイルをリセットし、デザイン仕様に合わせてサイズ、色、間隔を再定義します。テキストを大きくするだけに<h1>を使ったり、テキストを小さくするだけに<h6>を使ったりしないでください。これは初心者が最もよく犯す間違いの1つです。📖 まとめ
<h1>から<h6>― 合計6レベル。h1が最も重要で、h6が最も重要度が低い。- 各ページに1つの
<h1>だけ。見出しレベルはスキップしてはいけない。 - 見出しの意味論的な意味は見た目よりも重要 ― SEOとアクセシビリティに影響する。
<article>や<section>などの意味論的タグと組み合わせるとより効果的。- フォントサイズ制御のために見出しタグを使わない ― スタイリングはCSSに任せる。
📝 練習問題
- 見出し付きの記事を書く： 正しい
<h1>、<h2>、<h3>の階層を使って、好きなトピック（例：「私の趣味」）に関する短い記事を書いてください。少なくともh1、h2、h3のレベルを使ってください。 - エラーを見つける： 次の見出し階層の間違いは何ですか？修正してください。
<h1>私のブログ</h1><h3>記事1</h3><h5>サブ見出し</h5><h1>記事2</h1> - 観察練習： ニュースサイトを開き、ブラウザの検証ツール（F12）を使ってページの見出し階層を調べてください。適切な見出しの慣習に従っているか確認してください。
