div要素をワイヤーフレームとして使わないCSSレイアウト

さて、今回のCSS改造における最重要課題であったのが、div要素をワイヤーフレームとして使用しないCSSレイアウトです。原理は単純で、body要素直下の意味的ブロック要素すべて（と適宜必要となる要素と）にid属性を割り振る、ということに尽きます。

このサイトにおいては、以下のようなCSSを書いてレイアウトを実現しています。

/***************************************
  Left Column
****************************************/
p#xreaad,
div#linkunitads,
h2.date,
...
dl#listtitle {
  _display:inline;/*forIE6*/
  float:left;
  clear:both;
  width:55.8%;
  margin-left:3%;
}
/***************************************
  Right Column
****************************************/
p#prev,
p#next,
h2#searchthisblog,
...
ul#archivetree {
  margin-left:61.8%;
  margin-right:3%;
}

このように、それぞれの領域に収めたい要素とそのid属性とのセットすべてを指定しなければいけないのが面倒なところですが、div要素を使うときと同じような仕方で（なんとなぁく）カラムを分けることは可能です。

パーセンテージの指定についてですが、左端・右端・真中のそれぞれに3％の隙間をあけることを考慮して、まず、右カラムに指定する左マージン（ここでは61.8％）を決定し、左端の隙間と真中の隙間との合計である3+3=6％を先の値から引いた値（55.8％）を左カラムのwidthとして指定します。左端の隙間3％を左カラムの左マージンに、右端の隙間3％を右カラムの右マージンに指定すれば、自動的に真中の隙間3％が決まります。このやり方はIEでバグるので、左カラムにdisplay:inline;を指定しています（cf. IE Doubled Float-Margin Bug）。

しかし、ここでのwidthの指定は必須なので、float指定のされたカラム内に含まれる各ブロック要素に対する横方向paddingの個別指定ができなくなります。対象ブロック要素のみの背景色を変えたいというような場合以外は必要ない気がしますが、どうしてもという場合には、divをかませるほかないかと思われます（cf. IE6のwidth解釈バグ対処法）。

見出しや段落ごとに異なるpaddingの値を指定したくなりますが、左側のタテの線はそろっていたほうがいい気がします。結果として、かなり整然とした見栄えになると思います。

διαφωρα

div要素をワイヤーフレームとして使わないCSSレイアウト