div と span はいつ使う？ — 迷ったときの判断基準

学び始めのころは、何かをまとめたいときにとりあえず div で囲んでしまいがちです。動くので間違いではないのですが、あとから読み返したときに何のかたまりなのか分からなくなります。判断基準を持っておくと、迷う時間がなくなります。

まず、2つの決定的な違い

• div … 前後で改行される。文章のかたまりや、レイアウトの箱に使う
• span … 改行されず、文章の途中に埋め込める。一部の文字だけを扱いたいときに使う

この「改行されるかどうか」が、そのまま使い分けの基準になります。段落まるごとを囲みたいなら div、文中の数文字だけを囲みたいなら span です。

div を使う前に、他のタグを思い出す

div と span には「意味」がありません。ただの入れ物です。中身に合ったタグが他にあるなら、そちらを使ったほうが、あとで読む人にも検索エンジンにも伝わります。

• ページの主要な区切り → section（見出しを持つまとまり）
• サイトのメニュー → nav
• 記事本体 → article
• ページ上部・下部 → header / footer
• 押すもの → button（div にクリックを付けるより確実に動く）

最後の button は特に大事です。div をボタン代わりにすると、キーボード操作や読み上げ環境で使えなくなります。押すものは button と覚えてしまってください。

それでも div が要る場面

レイアウトのためだけに、意味のない箱がどうしても必要になることはあります。横並びにするための外枠などがそれです。そういう場合は素直に div を使って構いません。判断の順番は「意味のあるタグがあるか？ 無ければ div」です。

class 名は見た目ではなく役割で付ける

• よくない例 … class="red"、class="margin20"（あとで色や余白を変えると名前が嘘になる）
• よい例 … class="alert"、class="card"（何のかたまりかが分かる）

名前を役割で付けておくと、デザインが変わってもHTMLを書き直さずに済みます。ここまで来たら、いよいよそのclassにCSSを当てていきましょう。