こんにちは！フロントエンドの世界へようこそ。
HTMLを学び始めると、避けては通れないのが「表（テーブル）」ですよね。数字やデータを並べるのに便利ですが、実はこの「表」には、意外と見落とされがちな大切なルールがあるんです。
今回は、表の「名前」を決める`
—
表には「タイトル」が必要なんです
想像してみてください。あなたは今、スーパーでお買い物をしています。棚にたくさんの商品が並んでいますが、もし一つ一つに「何の商品か（価格や産地など）」が書かれていなかったらどうでしょう？ どれがリンゴで、どれが特売品なのか、さっぱり分かりませんよね。
HTMLの`
| 果物 | 売上 |
|---|---|
| りんご | 500個 |
なぜわざわざ最初なのでしょうか？
それは、「この表はこれから何のデータを語るのか」を、読み手が最初に把握できるようにするためです。
例えば、視覚に障がいがあり「スクリーンリーダー（画面読み上げソフト）」を使っている方にとって、表のタイトルが最初にあることは、本で言えば「章のタイトル」を確認するのと同じくらい重要です。タイトルを読んでから中身を確認することで、「あ、今から果物の売上データを聞くんだな」と心づもりができるんですね。
つまずきポイント：CSSで見た目を変えるとき
「`
大丈夫です！HTML上の配置は「最初」というルールを守りつつ、CSSの`caption-side: bottom;` を使えば、見た目だけを下に持ってくることができます。
caption {
caption-side: bottom; / これで見た目だけ下に移動できます /
margin-top: 10px; / 少し余白を作ると綺麗ですね /
font-weight: bold; / 強調してタイトルらしくしましょう /
}
こうすれば、「アクセシビリティ（誰にでも優しいこと）」を担保しながら、デザインのこだわりも両立できます。現場でもよく使うテクニックですよ。
まとめ：小さな気遣いが「良いWebサイト」を作る
`
Web制作は、こうした小さな「思いやり」の積み重ねです。
1. `
コメント