はじまりはじまり。
今回のテーマ：何でもかんでもdivにしない
CSSを覚え立ての方が、「CSSレイアウト＝divタグで囲む！」と思いこんでしまうケースがあるようです。
確かにDivを多用するとスタイルの指定が容易になるため、とりあえず的に<div>でマークアップしてしまうこともあるかもしれません。
しかし、例えばこんなソースはどうでしょうか？
<div id="contents">
<div id="contents_header">
<h1>header</h1>
</div>
<div id="contents_text">
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div id="contents_list">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>
かなり極端ではありますが、<div>を使いすぎてしまった悪例です。<h1>や、<p>のみを<div>でマークアップしています。しかしこの例ではわざわざ<div>でマークアップしなくても、<h1>や、<p>は子孫セレクタをつかえばスタイルを適用することができます。
実は<div>というタグには明確な役割、意味はありません。囲んだ範囲をブロックにできるため、CSSのスタイルを適用するためによく使われます。ですが、便利だからといって使いすぎてしまうと、ソースが<div>だらけでゴチャゴチャになってしまい、可読性やメンテナンス性が著しく損なわれます。
では<div>を使う判断はどのようにすればいいかですが、「整理する必要があるかどうか」と考えると比較的簡単ではないでしょうか。
物を整理するのと同じで、「役割上ひとまとめにしておきたいもの」を<div>でまとめています。収納用の引き出しや棚へ細かい物をしまうのと同じイメージです。
そう考えると、「何でもかんでも<div>」は防げそうな気がしませんか？
「デザインのためのブロック化」ではなく、「文書構造上整理するためのブロック化」と考えると、<div>を減らすことができるはずです。
少しずつ挑戦してみてください。
では次回もお楽しみに。
