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

エ・ビスコム・テック・ラボ
2008-10-03 19:54:00
ウェブページを段組みで表現するには、floatプロパティやpositionプロパティを利用するのが一般的だ。しかし、CSS 3のMulti Columnを利用すると、コンテンツ変更に伴うレイアウトの調整を省力化できるだろう。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

段の横幅を指定する場合

　段の横幅を指定して段組みを作成する場合、column-widthプロパティを利用する。

　たとえば、文章全体を囲んだ<div>に対して「column-width: 250px」と指定した場合、表示可能な範囲に収まる数だけ250ピクセルの横幅の段が作成される。このとき、表示範囲が余る場合は各段の横幅が大きくなる。

　そのため、次のサンプルのようにブラウザ画面の横幅を変えてみると、段の数や横幅が変わるが、1つの段の横幅が250ピクセル以下になることはない。サンプルでは段組みの上に250ピクセルの横幅を示す赤いバーを表示しているので、横幅の目安にしてほしい。

　なお、column-widthプロパティはFirefoxでは-moz-column-width、SafariやChromeでは-webkit-column-widthと記述する。

段の横幅を250ピクセルに指定したもの 段の横幅を250ピクセルに指定したもの 
div{
-moz-column-width: 250px;
-webkit-column-width: 250px;
}
※ブラウザで表示を確認する

　表示範囲を極端に狭くすると段組みは1段組みとなり、段の横幅も250ピクセルより短くなる。

ブラウザ画面の横幅を250ピクセルよりも短くした場合 ブラウザ画面の横幅を250ピクセルよりも短くした場合

　次回は、段の間隔を調節したり、区切り線を表示するプロパティを紹介する。

  • 新着記事
  • 特集
  • ブログ