shortcut

blogがはやりだした2年ほど前に既に語り尽くされた感のある話だが、最近とてもいい本を買っていろいろ勉強してみたので書いてみる。

amazonの書評は辛辣だったりするけど、サンプルが多いのと、現在ワーキングドラフトになっているCSS2.1について言及されている部分が多いので、これからCSSを仕事で使う人は一度目を通しておいた方がいい本だと思う。

で、段組みの方法だが、メジャーなところで以下の2通りの方法があると考えられる。

• 下のブロックの位置指定を絶対指定にして、上のブロックをずらした箇所に表示させる

  利点
  floatを用いた場合と違い、下のブロックが回り込まない事がない。 重なった場合は、後の要素かz-indexの値の大きい要素が優先される。

  欠点
  絶対指定を行った下のブロックは包含ブロックから無視されるので、上のブロックよりもブロックの高さが高い(長い)場合は、それ以降の要素と重なってしまう。
  両方のブロックを絶対位置で指定したサンプルを作ってみたので、興味のある人はそちらも見てほしい。

• ブロック要素を2つ作り、上のブロックをfloatの状態にして下のブロックを回り込ませる

  利点
  コンテンツが重なることがない

  欠点
  IEでは包含ブロックの幅と段組みを行う2つのブロックの幅が等しいと回り込まない場合がある。
  今回作ったサンプルも、IEで下ブロックが回り込まなかったため、幅をそれぞれ29%と70%に指定している。

作ってみてわかったけど、どちらかが正解という訳ではなくて、用途によって使い分ける必要があるだろう。
メニューなどのコンテンツのボリュームが見えているものは絶対指定を使った段組みにして、コンテンツエリアのなかでさらに段組みを行う場合はfloatを使った段組みをする、など。

IEがもう少しまともな表示をしてくれると楽なんだけどなぁ。
あと、互換モードは悪夢だ…。