CSS 3における新しいレイアウト手法:ボックスレイアウト

エ・ビスコム・テック・ラボ
2008-11-13 22:24:01
  • このエントリーをはてなブックマークに追加

「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段組みで表示したもの 「Multi Column」の機能を利用して3段組みで表示したもの
#container{
-moz-column-count: 3;
-webkit-column-count: 3;
}
ブラウザで表示を確認する

 次回は、ボックスレイアウトを利用した段組みで、段の横幅をウィンドウに合わせて変化させる方法を紹介する。

  • コメント(1件)
#1 tomita   2008-11-16 10:38:55
http://b.hatena.ne.jp/at_yasu/20081115#bookmark-10822025
> iid:at_yasu 様

「ブラウザで表示を確認する」のリンク先を修正しました。
ご指摘、ありがとうございました。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]