ウェブページの段組みをレイアウトするCSS 3のMulti Column

エ・ビスコム・テック・ラボ
2008-10-03 19:54:00
  • このエントリーをはてなブックマークに追加

 今回は、段組み(マルチカラム)のレイアウトを実現するCSS 3の「Multi Column」の機能を紹介したい。これまではFirefoxが対応しているだけだったが、SafariSafari 3から対応した。また、Google Chromeも対応している。

現在の段組みとMulti Columnによる段組みの違い

 現在のウェブページで段組みを実現するには、floatプロパティによる回り込みや、positionプロパティによる位置指定の機能を利用するのが一般的だ。たとえば、次のサンプルではfloatプロパティを利用して2段組みを作成している。

floatプロパティで2段組みを作成したもの floatプロパティで2段組みを作成したもの
ブラウザで表示を確認する

 しかし、floatプロパティやpositionプロパティを利用した段組みでは、段ごとにコンテンツを独立して扱う必要がある。そのため、1段目の最初にコンテンツを追加しても、1段目のコンテンツが増えるだけで2段目には影響しない。段ごとの高さを揃えてレイアウトのバランスを取りたい場合、1段目に記述したコンテンツを2段目に記述しなおす必要があり、コンテンツの内容を変更するたびに調節しなければならない。

1段目に画像を追加したもの。1段目と2段目の高さが変わってしまう。 1段目に画像を追加したもの。1段目と2段目の高さが変わってしまう。
ブラウザで表示を確認する

 一方、CSS 3の「Multi Column」の機能を利用した2段組みの場合、1段目にコンテンツを追加すると、1段目の末尾のコンテンツが2段目に流れ込み、2つの段の高さが均等になるように自動的に調節される。そのため、コンテンツの内容を変更しても常に各段を均等な高さで表示できるというメリットがある。

「Multi Column」の機能を利用して2段組みを作成したもの 「Multi Column」の機能を利用して2段組みを作成したもの
ブラウザで表示を確認する
1段目に画像を追加したもの。1段目と2段目は常に均等な高さで表示される 1段目に画像を追加したもの。1段目と2段目は常に均等な高さで表示される
ブラウザで表示を確認する

Multi Columnの機能を利用した段組み

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