HTMLの見出し構造、正しく作れていますか？「Webの目次」を整理して、誰にとっても読みやすいページを作ろう
こんにちは！Web制作の学習を始めたばかりの皆さん、毎日コードと格闘、お疲れ様です。
HTMLを書き始めると、`
`や`
`といった「見出しタグ」に必ず出会いますよね。「とりあえず文字を大きくしたいから`
`を使おう」なんて適当に選んでいませんか？実はその選び方、Webサイトの「わかりやすさ」や「アクセシビリティ（誰にとっても使いやすいか）」に直結する、とても大切なポイントなんです。
今日は、そんな見出しの「階層構造」について、身近な例えを交えながらお話しします。難しく考える必要はありません。一緒に整理していきましょう！
—
見出しは「本の目次」と同じ。まずはイメージしてみよう
突然ですが、あなたは本屋さんで面白い本を見つけました。その本の目次が、もしこんな風だったらどう感じますか？
- 第1章：料理の基本
- 第4章：お皿の洗い方
- 第2章：包丁の選び方
「えっ、順序がめちゃくちゃで読みにくいな…」って思いますよね。Webサイトも全く同じです。
HTMLの見出しタグ（`
`〜`
`）は、ページという本の「目次」を作る役割を持っています。Googleの検索ロボットや、視覚障がいの方が使う「スクリーンリーダー（画面読み上げソフト）」は、この見出しの順番を頼りに「このページには何が書かれているのか」を判断しているんです。
見出しの鉄則：数字を飛ばさない！
見出しのルールはたった一つ。「大きな親から順に、数字を飛ばさずに使うこと」です。
- `
`（大見出し）：そのページ全体のタイトル
- `
`（中見出し）：大枠のテーマ ` `（小見出し）：中見出しの中の具体的な項目 ` `の次にいきなり` `が来たり、` `の中にまた` `が並びすぎたりすると、構造が壊れて迷子になってしまいます。まずは「入れ子（ネスト）構造」を意識してみましょう。 — セクション要素で「部屋」を作ろう
HTML5からは、`header`、`main`、`article`、`section`、`footer`といった「セクション要素」が登場しました。これらは、ページの中身を整理整頓するための「段ボール箱」や「部屋」のようなものです。
それぞれの箱の中に、適切な見出しを入れることで、ブラウザに「ここがこの章の始まりですよ！」と教えてあげることができます。
実践！正しい階層構造のコード例
実際にコードを書いてみると、こんな形になります。
美味しいコーヒーの淹れ方
必要な道具を揃えよう
まずは美味しい豆とドリッパーを用意します。
おすすめのコーヒー豆
浅煎りから深煎りまで紹介します。
淹れ方の手順
さあ、実際に淹れてみましょう。
どうでしょう？`
`という大きなテーマがあって、その中に`
`という章があり、さらにその中に` `という節がある。まるでマトリョーシカのように、綺麗な階層になっていますよね。 — つまずきやすいポイントQ&A
Q. 見出しの数字を増やすと文字が小さくなって見栄えが悪いです…
A. それはCSSの役割です！
HTMLは「この文章はタイトルですよ」という「意味」を伝えるためのもの。見た目を整えるのはCSS（スタイルシート）の仕事です。`font-size`を使えば、``だって` `より大きく表示できます。「見た目」のために「意味（階層）」を犠牲にするのは、ちょっとだけ我慢しましょうね。 Q. 1ページに` `は複数あってもいいの？
A. 基本は「1ページに1つ」がベストです。
そのページの「顔」は一つだけ、と決めておくとGoogleの検索エンジンも内容を理解しやすくなります。—
最後に：完璧を目指さなくても大丈夫！
最初は「どの見出しを使えばいいんだろう？」と迷うこともあると思います。そんな時は、「このページを音声読み上げソフトで聞いた時、ちゃんと内容が伝わるかな？」と想像してみてください。
Web制作は、コードを打つだけの作業ではありません。「誰かに情報を届けるための橋渡し」です。
今日から一つ、見出しの階層を意識してコードを書いてみてください。それだけで、あなたの書くHTMLはグッとプロに近づきます。もし迷ったら、いつでもまたここに戻ってきてくださいね。一緒に少しずつ、レベルアップしていきましょう！
コメント