HTMLとCSS 。
よく、レイアウトと構造の分離、というのを見ます。
HTML では構造を記述し、CSS でレイアウトを記述する、というものですね。

それを、CSS でもやってみよう、というのが今回の記事の主旨です。
どんなことかというと、今まで自分はこのタイトル要素の背景はこれで、余白はこれという、その要素のスタイルを記述していました。
でも、タイトル用の記述であっても（たとえば左にアイコンをつけるとか）
他の、タイトルではないところでそのアイコンをつける必要が出てくる場合がありますよね。

でもタイトル用に定義されたスタイルを適用するといらない余白まで定義されていてうまく使えない場合とかがあります。

そこで、装飾に使うスタイルとレイアウトに使うスタイルとで完全に分離してしまってはどうか、というのを考えたわけです。（すでにやってる人が多いかもしれませんが・・自分は最近気づいたので(;´д｀)）

たとえば、アイコンをつけるクラス.icoと背景に色をつけるクラス.bgがあるとします。
そして、タイトル部分に#titleをつけます。

このタイトルの位置については#titleで定義し、それ以外の付加要素（アイコンとか背景色とか）はすべてクラスで指定します。

<h1 id="title" class="ico bg">test</h1>

という具合に。
他にborderをつけたい場合はクラスにそれを追加してやります。
こうすることで、使い回しを容易にし、かつその要素が一体どんなスタイルで表示されるのか、コード上からでも大体の状態を推測することが可能になります。

これらのことから、ID にはmargin、padding、floatなどのレイアウトに関わる記述を、クラスにはborder、background、colorなど装飾に関わる記述を、というふうにわけることができます。

もちろん、.font_redのようなスタイルはなしです。あくまで使用する箇所がわかるクラス名にします。
たとえば、.ico_helpなどのように、そのクラスがなにかを単体である程度推測できるものです。

また、デバッグ用のスタイルを別途定義しておくとコーディングがスムーズに行くかもしれません。
.floatLeftや.bdr1pxなどを用意しておいて、クラス名に追加するだけですぐに状態の変化を確認できます。
いちいち直接 style に追加したり、該当のスタイルに追加、なんてことがいらなくなります。

クラスを複数指定することで、HTML 的に長くなって、CSS だけでレイアウト変更、なんてことがむずかしくなってしまうデメリットがありますが、あまりリニューアルがなく、複数回使う要素がかなりの頻度で出てくる場合のサイトには向いてる記述かなーなんて思います。

この記事のカテゴリー一覧を見る⇒CSSテクニック

• 
• 
• 
• 
• 

• パーマリンク
• コメント(0)
• トラックバック(0)

• <<IE7を対象としたハック
• |
• IEで、背景を指定すると余白が消える>>