2009年07月08日

何でもかんでもdivにしない:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:何でもかんでも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>を減らすことができるはずです。

少しずつ挑戦してみてください。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:38
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック