Webページを「本」として考えよう。見出しタグ（h1-h6）の正しい並べ方、教えます！
こんにちは！Web制作の世界へようこそ。HTMLを書き始めると、`
`や`
`といった「見出しタグ」に必ず出会いますよね。
でも、正直なところ「どれを使っても文字の大きさが変わるだけでしょ？」なんて思っていませんか？実はその考え、ちょっとだけ「もったいない」んです。
今日は、Webページの「背骨」とも言える見出しの正しい使い方と、それをチェックするプロのツールについて、お話ししていきましょう。
—
見出しタグは「本の目次」と同じ！
皆さんが本屋さんで新しい本を手に取ったときを想像してみてください。
- 一番大きなタイトル（h1）：本の表紙のタイトル
- 章のタイトル（h2）：第1章、第2章といった大きな区切り
- 節のタイトル（h3）：第1章の中にある、さらに細かい見出し
もし、この本が「第1章」の次がいきなり「第5章」から始まっていたらどうでしょう？「あれ、読み飛ばしたかな？」と不安になりますよね。Webページもこれと全く同じなんです。
やってはいけない「階層スキップ」
時々、見た目を大きくしたいという理由だけで、`
`の次にいきなり`
`を使ってしまう人がいます。これは、「第1章のすぐ後に、物語の結末がいきなり書いてある」ような状態です。
Googleの検索エンジンや、目の不自由な方が使う「スクリーンリーダー（読み上げソフト）」は、この順序を頼りにページの内容を理解しています。だからこそ、順番を守ることは、誰にとっても優しいページ作りの第一歩なんです。
—
現場のプロはどうやってチェックしているの？
「でも、自分で書いたコードがちゃんと順番通りになっているかなんて、どうやって確認するの？」と不安になりますよね。大丈夫、プロも手作業だけで確認しているわけではありません！
私たちがよく使う、頼れる相棒を紹介します。
1. Lighthouse（ライトハウス）で診断する
Chromeブラウザに入っている「Lighthouse」というツールは、ページの健康診断をしてくれます。
1. Chromeのデベロッパーツールを開く（右クリック > 検証）
2. 「Lighthouse」タブを選択
3. 「アクセシビリティ」にチェックを入れて診断開始！
もし見出しの順序がバラバラなら、ここで「見出しのレベルが順次ではありません」と優しく教えてくれます。
2. axe DevTools（エックス・デブツールズ）でピンポイント確認
これ、実はプロの現場でめちゃくちゃ使われています。ブラウザの拡張機能としてインストールできるのですが、何が素晴らしいかというと、「どこがダメなのか」を視覚的に指し示してくれる点です。
「この見出しタグの使い方、ちょっと変だよ」という箇所を、まるで家庭教師のように指摘してくれるので、初心者のうちは本当にお世話になります。
—
実際に書いてみよう！正しい見出しの例
最後に、正しい見出しの構造をコードで見てみましょう。この形をテンプレートのように覚えてしまえば、もう迷うことはありません！
美味しいコーヒーの淹れ方
必要な道具を揃えよう
まずは豆とドリッパーを用意しましょう。
豆の選び方
浅煎りがおすすめです。
ドリッパーの選び方
陶器製は温まりにくいので注意が必要です。
さあ、抽出してみよう
お湯の温度は90度がベストです。
ポイントは、「h2の次はh3」というように、一段ずつ階段を降りるイメージを持つことです。 いきなりh4やh6へ飛び級しないように気をつけるだけで、あなたの書くHTMLは一気に「プロの品質」に近づきます。
—
最後に：完璧じゃなくても大丈夫！
最初から完璧に構造化しようとすると、手が止まってしまうこともありますよね。でも、まずは「見出しは目次なんだ」と意識するだけで、あなたのWeb制作のスキルは確実にレベルアップしています。
まずはLighthouseなどのツールに頼りながら、「あれ？ここ順番が逆だったかな？」と遊び感覚でチェックしてみてください。
一つひとつ、一緒に積み上げていきましょう。あなたの書くページが、誰かにとって読みやすい素敵な場所になりますように！応援しています。
コメント