▼EntryMore▼

テクニック詳細

CSS3 で作る 3 カラム（ないし 2 カラム）レイアウトの面白いところは、CSS2 ではむずかしかった、すべてのボックスの高さを揃える、ということがとても容易だ、ということです。

CSS3 のボックス要素で 3 カラムレイアウトを作るのに必要なのは、極端に言えば "display: box; と指定するだけ" です。
そうすると、中に内包されている div^※が勝手に横並びになり、かつ一番長い div に追従して（つまり "display: box;" と指定した親要素の高さに追従して）高さがそろってしまいます。
※正確にはブロック要素に対して、です。なので、div でなくても p でも同様の結果になります。

ぶっちゃけこれで終わりです。
が、まぁ実際にはそれ以外にも色々見栄えを作りこまないとなのでこれで終わりにはなりませんが。
ということで、今回作ったサンプルの CSS ソースと HTML ソースをば。

CSS ソース

HTML ソース

見てもらうと分かりますが、とてもシンプルです。ビバ CSS3 です。はやく IE がなくなってくれればいいのに。

現状ではベンダープレフィクスをつける必要がある

ただ、CSS3 はまだ仕様が確定しているわけではないので、最近のモダンブラウザは独自実装という形で先行実装しています。そのため、"display: box;" に変わる手段として、Firefox なら -moz- の、Safari や Google Chrome なら -webkit- のプレフィクスを用いて "display: -moz-box; (display: -webkit-box;)" と指定します。

こうすると、Firefox と Safari および Google Chrome でボックス要素が生成できます。
あとは冒頭でも説明した通り、ボックス要素の中にカラム数に応じたブロック要素（大体の場合 div ）を入れることで、簡単に 3 カラムのできあがり、というわけです。

ボックスの表示順序を制御する「box-ordinal-group」

・・と安心していたんですが、実際に作っていてふと、CSS の強みである「見た目の操作」ということに関して、3 カラムの実現はできても、CSS2 の float を駆使して実現していた HTML での登場順序と、表示順序を操作する、ということができないことに気づきました。

ということで、再び調査したところ、わりとあっさり解答が見つかりました。
その答えは、"box-ordinal-group" プロパティです。

これはまさに、ボックスの表示順序を指定するためのプロパティです。
なので、box-ordinal-group: 1;と指定すれば、ボックス要素内でどこに書かれていても一番左側に表示されます。

続いて 2、3、と書いていけばそのままの順番で表示されます。
なので、メインコンテンツとなる #mainContents は真ん中（つまり 2 番目）に表示されてほしいのでbox-ordinal-group: 2;と指定しています。

ただ、ここでも独自実装の問題があるので、box-ordinal-group は、Firefox では-moz-box-ordinal-group、Safari、Google Chrome では-webkit-box-ordinal-groupと書きます。

これで、めでたく 3 カラムの完成です。
・・・とはなりませんでした。

Firefox と webkit 系での表示差異

おそらく、これは推測でしかありませんが、独自実装、先行実装のためのズレなのかな、と思いましたが、 "Firefox ではボックス要素内のブロック要素（div）は、指定した width の値が padding、border を含めた値になるのに対し、Safari、Google Chrome では通常通りのブロック要素としての width、つまりwidth+padding+border、となる" ようです。

こちらも CSS3 のプロパティですが、IE6 の互換モードのボックスモデルをご存知の方には説明が簡単ですが、あの "width が padding と border を含めた値" として指定できる、というものです。
その名も "box-sizingプロパティ"。

これは、width で指定した値が、padding と border を含んだ値なのか、含まない値なのか、を指定するプロパティです。
これができることのメリットは、width: 50%; などと指定した要素に対しても気兼ねなく padding を設定できるところです。

さらにこのプロパティも、-moz- -webkit-のプレフィクスが必要です。
そして、width に padding や border を含める場合にはbox-sizing: border-box;を、そうでない場合にはbox-sizing: content-box;を指定します。

なので、サンプルでは Safari、Google Chrome 向けに-webkit-box-sizing: border-box;を指定しています。

ここまでして、やっと CSS3 による 3 カラムレイアウトの完成です。（といっても大したことはしていませんが）