builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

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;
}
ブラウザで表示を確認する

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

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]