第15回 何でもかんでもdivにしないテーブルレイアウトを卒業しよう

何でもかんでも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>」は防げそうな気がしませんか?

「デザインのためのブロック化」ではなく、「文書構造上整理するためのブロック化」と考えると、<div>を減らすことができるはずです。

少しずつ挑戦してみてください。では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
wrapperは必須?
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読