CSS 3における新しいレイアウト手法：ボックスレイアウト
エ・ビスコム・テック・ラボ
2008-11-13 22:24:01
今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認する。
「Multi Column」とボックスレイアウト
CSS 3で「段組み」と言えばcolumn-countやcolumn-widthプロパティを利用する「Multi Column」の機能が有名だ。本連載の中でも「Multi Column」を利用した段組みの設定方法を「ウェブページの段組みをレイアウトするCSS 3のMulti Column」で紹介した。
「Multi Column」とボックスレイアウトによる段組みの違いは明白だ。「Multi Column」では各段の横幅は常に同じ長さになり、段ごとに横幅を変えることはできない。また、どの段に何を表示するかを細かく指定することができないので、文章の段組みには適しているが、サイドバーなどの段組みのレイアウトには適していない。
たとえば、次のサンプルは
〜
に対して「column-count: 3」と指定し、3段組みで表示するように指定したものだ。各段の横幅はブラウザウィンドウの横幅を3等分した長さになり、高さが均等になるように中身も3等分される。そのため、背景が黄色のコンテンツ部分は2段目と3段目に分割して表示されてしまうことがわかる。
「Multi Column」の機能を利用して3段組みで表示したもの
#container{
-moz-column-count: 3;
-webkit-column-count: 3;
}
※ブラウザで表示を確認する
次回は、ボックスレイアウトを利用した段組みで、段の横幅をウィンドウに合わせて変化させる方法を紹介する。
- コメント（1件）
#1
tomita
2008-11-16 10:38:55
- ホワイトペーパー
クラウド意識調査結果を公開
データ爆発に備える"無限の可能性"
スマートデバイスに忍び寄る危機！
セキュリティでブランド価値を向上
出遅れたＢＹＯＤの起爆剤となるか
日立のビッグデータをライブ体験
物理→VDI環境移行「3つの罠」とは
> iid:at_yasu 様
「ブラウザで表示を確認する」のリンク先を修正しました。
ご指摘、ありがとうございました。