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

グリッドベースのレイアウトを作成すると、ついつい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カラム

サイトのキャプチャ

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

HTML:16カラム

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

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

classの乱用を避ける

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

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

リスト要素の使用

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

サイトのキャプチャ

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

HTML

CSS

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

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

サイトのキャプチャ

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

HTML

CSS

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

サイトのキャプチャ

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

HTML

CSS

子要素のclassは親要素に

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

HTML:子要素に使用した例

CSS:子要素に使用した例

HTML:親要素に使用した例

CSS:親要素に使用した例

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

top of page

©2017 coliss