無駄なdiv要素やclassだらけのマークアップから卒業する方法
Post on:2010年4月2日
sponsors
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。
Fight Div-itis and Class-itis With the 960 Grid System
下記は各ポイントを意訳したものです。
はじめに
数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。
しかしながら、このCSSのフレームワークは余分なエレメントを数多く生成してしまうことがあります。特に複雑なレイアウトをもったページなどでフレームワークを使用することは、本当にテーブルから改善されているのでしょうか？
無駄のない美しいコードを作成することは、フレームワークを単に使用するだけでなく、それが本当に何を表すのか考えることを意味します。
これはdiv要素を無駄に多く使用するのを避けるだけでなく、classの乱用も避けることができます。
CSSのフレームワーク：960.gsの場合
最も人気の高いフレームワークの一つに960 Grid System(960.gs)があります。
これは文字通り、960pxをデフォルトの幅としたグリッドシステム用のフレームワークです。
まずは、960.gsでの実装例をみてみます。
ベースは12カラムで、3つのグリッドにしたものです。
HTML：12カラム
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="container_12"> <div class="grid_6">...</div> <div class="grid_2">...</div> <div class="grid_4">...</div> </div> </textarea> |
ベースは16カラムで、2つのグリッドにしたものです。
HTML：16カラム
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="container_16"> <div class="grid_12">...</div> <div class="grid_4">...</div> </div> </textarea> |
上記のように、グリッドのサイズを変更することは、非常に簡単にできます。
これはあくまでもサンプルでの利用例です。
ここでdiv要素を使用しているのは、ウェブページのレイアウトにフレームワークを基盤としているのを分かりやすくするためです。
classの乱用を避ける
過度のCSSのコードに対する最も単純な解決方法は、必要でないことをやめることです。
例えば、960.gsでは多くのレイアウトに対応するために180以上のclass定義を含んでいます。
使用する際には、自分が使用するclassのみ残し、他のclassは削除するようにします。
リスト要素の使用
classを適用するのはdiv要素に限定されているわけではありません。さまざまな要素に適用が可能です。
まずは、リスト要素からです。
リスト要素をマルチカラムにレイアウトします。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <ul class="examples"> <li>…</li> <li>…</li> <li>…</li> </ul> </textarea> |
CSS
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> .examples li { (properties of .grid_4) } </textarea> |
この実装例では、無駄なdiv要素を使用しないだけでなく、classの使用も最小限にしています。
画像とキャプションの使用
img要素の画像に隣接したp要素のキャプションです。
HTML
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="container_16 photos"> <img src="…" alt="photo" /> <p>First caption</p> <img src="…" alt="photo" /> <p>Another caption</p> </div> </textarea> |
CSS
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> .photos p { (properties of .grid_10) } .photos img { (properties of .grid_6) } </textarea> |
複数の見出しとパラグラフの使用
見出しとパラグラフにそれぞれ同じスタイルを適用しています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="datelist"> <h3>subhead</h3> <p>…</p> <strong>3 p.m.</strong> <strong>Jan 1, 2010</strong> <h3>subhead</h3> <p>…</p> <strong>3 p.m.</strong> <strong>Jan 1, 2010</strong> </div> </textarea> |
CSS
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> .datelist { (properties of .container_12) } .datelist h3 { (properties of .grid_3) } .datelist p { (properties of .grid_7) } .datelist strong { (properties of .grid_1) } </textarea> |
子要素のclassは親要素に
子要素に同じclassを使用する際は、親要素にclassを使用するようにします。
HTML：子要素に使用した例
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
CSS：子要素に使用した例
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> .item { (various properties) } </textarea> |
HTML：親要素に使用した例
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="html" cols="60" rows="5"> <ul class="group-of-items"> <li>…</li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> </ul> </textarea> |
CSS：親要素に使用した例
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> .group-of-items li { (various properties) } </textarea> |
親要素にclassを使用した方が、無駄のない美しいものとなっています。
sponsors
