なぜ、見出しタグ（h1〜h6）を「ただの文字サイズ調整」に使ってはいけないのか？
Web制作を始めたばかりの頃、こんな経験はありませんか？
「文字を大きくしたいから、とりあえず`
`タグで囲っちゃえ！」
「見た目がいい感じになったから、この部分は`
`でいいや。」
実はこれ、Webの世界では「見た目」と「役割」の取り違えとして、一番やってしまいがちな失敗なんです。今日は、なぜ見出しタグが「単なる文字の大きさ」以上の重要な意味を持っているのか、その秘密を紐解いていきましょう。
—
見出しタグは「Webページの目次」そのもの
想像してみてください。あなたは今、とても分厚い専門書を手に取っています。もし、その本に「章」や「節」の区切りがなく、最初から最後まで同じサイズの文字でびっしりと文章が書かれていたらどう感じますか？
「どこが重要なトピックなのか分からない…」
「今、自分はどこを読んでいるんだろう？」
そうですよね。きっと途中で読むのを諦めてしまうはずです。
Webページも同じです。スクリーンリーダー（画面読み上げソフト）を使っている方にとって、見出しタグ（`h1`〜`h6`）は、「今、このページの中でどこを読んでいるのか」を教えてくれる唯一の道しるべになります。
「役割」を意識したHTMLの書き方
私たちが普段使っている見出しタグには、以下のような序列（ヒエラルキー）があります。
- `
`
: ページの「顔」。一番大切なテーマ（本のタイトル）。1ページに1つが理想です。 - `
`: 章のタイトル。 ` `: 節のタイトル。` `の中に含まれる小さなトピック。 このように、入れ子構造を意識して書いていくことが、アクセシビリティ（使いやすさ）の第一歩です。 — 「飛ばし」はNG！階段を一歩ずつ登ろう
初心者がよくやりがちなミスに「階層の飛ばし」があります。例えば、`
`の直後にいきなり`
`を使ってしまうようなケースです。 これは、階段を1段目からいきなり4段目にジャンプするようなもの。スクリーンリーダーを使っている方は、「あれ、今の階層はどこへ消えたの？」と混乱してしまいます。 良い例（階段を一段ずつ登る）: 美味しいコーヒーの淹れ方 豆の種類を選ぶ
浅煎りの特徴
深煎りの特徴
抽出道具を揃える
ペーパードリップの場合
悪い例（階段を飛ばす）:
美味しいコーヒーの淹れ方
豆の種類を選ぶ
「なんとなく見栄えがいいから」という理由でタグを選ぶのではなく、「この文章は、上の見出しの『子要素』かな？」と一呼吸置いて考えてみてください。それができれば、あなたはもう立派なマークアップエンジニアの仲間入りです！
—
見た目はCSSで、役割はHTMLで
「でも、`h2`だと文字が大きすぎてデザインが崩れちゃう…」
そんな悩みもよく分かります。大丈夫です。そこで登場するのがCSSの出番です！
HTMLは「構造（意味）」を担当し、CSSは「見た目（デザイン）」を担当する。 この役割分担を徹底しましょう。HTMLで正しい階層構造を作り、文字の大きさや色はCSSでいくらでも変えられます。
/ CSSで見た目を調整する /
h2 {
font-size: 1.2rem; / h2の役割はそのままに、見た目だけ小さくする /
color: #333;
}—
最後に：小さな配慮が、大きな優しさに
アクセシビリティというと、「なんだか難しそう」と身構えてしまうかもしれません。でも、本質はとてもシンプルです。
「もし自分が目が見えなかったら、このページをどうやって読み解くだろう？」
そう想像してみるだけで、あなたの書くコードはぐっと優しくなります。見出しタグを正しく使うことは、誰にとっても読みやすいページを作るための「思いやり」そのものなんです。
最初から完璧にできなくて大丈夫。まずは、次にコードを書くとき、「これは見出しかな？それともただの強調かな？」と問いかけてみることから始めてみてくださいね。あなたのその小さな一歩が、Webをより使いやすい場所へと変えていきますよ！
コメント