【入門編】th要素による見出しセルの定義 – HTML実践ガイド

Web制作を始めたばかりの頃、誰もが一度はぶつかる壁……それが「テーブル（表）の作成」です。

「データを見やすく並べるだけでしょ？」と油断していると、いざコードを書く段階で「あれ？ここは `

` だっけ？それとも `

`？」と手が止まってしまうこと、ありますよね。大丈夫、その悩み、実はとっても大切な気づきなんです！

今回は、テーブルの「見出し」を担うヒーロー、`

`要素の正しい使い方と、Webサイトを誰にでも優しくするための「scope（スコープ）属性」という魔法について、一緒に紐解いていきましょう。

—

まずはイメージしてみてください。あなたは今、スーパーでお買い物をしています。棚にはたくさんの商品が並んでいますが、その上には「野菜」「お肉」「お菓子」といった「看板」が出ていますよね。

この「看板」の役割を果たしてくれるのが、HTMLの `

` (Table Header) 要素です。

ブラウザは標準の設定で、`

`の中身を「太字」にして「中央揃え」に表示してくれます。これは単なるデザインではなく、「ここが見出しですよ！」という強いメッセージなんです。

—

さて、ここからが本題です。実は、視覚的に太字になっているだけでは、スクリーンリーダー（視覚障がいのある方が使う、画面の内容を読み上げてくれるソフト）には、「これがどこの見出しなのか」が正確に伝わらないことがあるんです。

そこで登場するのが `scope`（スコープ）属性 です。

scopeは、その`

`が「どの範囲の見出しなのか」をブラウザや読み上げソフトに教えてあげるための道しるべです。

これがあるだけで、機械は「あ、このデータは『価格』という見出しの下にあるものなんだな」と瞬時に理解できるようになります。まさに、Webアクセシビリティの第一歩ですね。

—

実際に、簡単な献立表を作ってみましょう。コピー＆ペーストして、ご自身のエディタで試してみてくださいね。

曜日	主菜	副菜
月曜日	ハンバーグ	サラダ
火曜日	焼き魚	おひたし

—

「タグを一つ増やすだけで本当に意味があるの？」と思うかもしれません。でも、あなたが書いたその小さな属性一つが、将来そのサイトを訪れる誰かの「見やすさ」や「使いやすさ」を大きく支えることになります。

HTMLは、ただ画面に文字を出すための道具ではなく、「情報を誰にでも正しく届けるための手紙」のようなもの。ぜひ、`

`という素敵な看板を立てて、あなたのテーブルを誰にでも優しいものにしてみてください。

もし書き方で迷ったら、またいつでもここへ戻ってきてくださいね。あなたのWeb制作ライフを、これからもずっと応援しています！