無駄なdiv要素やclassだらけのマークアップから卒業する方法

グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。

Fight Div-itis and Class-itis With the 960 Grid System

下記は各ポイントを意訳したものです。

• はじめに
• CSSのフレームワーク：960.gsの場合
• classの乱用を避ける
• リスト要素の使用
• 画像とキャプションの使用
• 複数の見出しとパラグラフの使用
• 子要素のclassは親要素に

はじめに

数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。

しかしながら、このCSSのフレームワークは余分なエレメントを数多く生成してしまうことがあります。特に複雑なレイアウトをもったページなどでフレームワークを使用することは、本当にテーブルから改善されているのでしょうか？

無駄のない美しいコードを作成することは、フレームワークを単に使用するだけでなく、それが本当に何を表すのか考えることを意味します。
これはdiv要素を無駄に多く使用するのを避けるだけでなく、classの乱用も避けることができます。

CSSのフレームワーク：960.gsの場合

最も人気の高いフレームワークの一つに960 Grid System(960.gs)があります。
これは文字通り、960pxをデフォルトの幅としたグリッドシステム用のフレームワークです。

まずは、960.gsでの実装例をみてみます。

ベースは12カラムで、3つのグリッドにしたものです。

HTML：12カラム

<div class="container_12">
<div class="grid_6">...</div>
<div class="grid_2">...</div>
<div class="grid_4">...</div>
</div>

ベースは16カラムで、2つのグリッドにしたものです。

HTML：16カラム

<div class="container_16">
<div class="grid_12">...</div>
<div class="grid_4">...</div>
</div>

上記のように、グリッドのサイズを変更することは、非常に簡単にできます。

これはあくまでもサンプルでの利用例です。
ここでdiv要素を使用しているのは、ウェブページのレイアウトにフレームワークを基盤としているのを分かりやすくするためです。

classの乱用を避ける

過度のCSSのコードに対する最も単純な解決方法は、必要でないことをやめることです。

例えば、960.gsでは多くのレイアウトに対応するために180以上のclass定義を含んでいます。
使用する際には、自分が使用するclassのみ残し、他のclassは削除するようにします。

リスト要素の使用

classを適用するのはdiv要素に限定されているわけではありません。さまざまな要素に適用が可能です。
まずは、リスト要素からです。

リスト要素をマルチカラムにレイアウトします。

HTML

<ul class="examples">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

CSS

.examples li { (properties of .grid_4) }

この実装例では、無駄なdiv要素を使用しないだけでなく、classの使用も最小限にしています。

画像とキャプションの使用

img要素の画像に隣接したp要素のキャプションです。

HTML

<div class="container_16 photos">
  <img src="…" alt="photo" />

First caption

  <img src="…" alt="photo" />

Another caption
</div>

CSS

.photos p { (properties of .grid_10) }
.photos img { (properties of .grid_6) }

複数の見出しとパラグラフの使用

見出しとパラグラフにそれぞれ同じスタイルを適用しています。

HTML

<div class="datelist">
<h3>subhead</h3>

…

  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>
<h3>subhead</h3>

…

  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>
</div>

CSS

.datelist { (properties of .container_12) }
.datelist h3 { (properties of .grid_3) }
.datelist p { (properties of .grid_7) }
.datelist strong { (properties of .grid_1) }

子要素のclassは親要素に

子要素に同じclassを使用する際は、親要素にclassを使用するようにします。

HTML：子要素に使用した例

<ul>
<li class="item">…</li>
<li class="item">…</li>
<li class="item">…</li>
<li class="item">…</li>
<li class="item">…</li>
<li class="item">…</li>
</ul>

CSS：子要素に使用した例

.item { (various properties) }

HTML：親要素に使用した例

<ul class="group-of-items">
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

CSS：親要素に使用した例

.group-of-items li { (various properties) }

親要素にclassを使用した方が、無駄のない美しいものとなっています。