ウェブページの段組みをレイアウトするCSS 3のMulti Column
エ・ビスコム・テック・ラボ
2008-10-03 19:54:01
ウェブページを段組みで表現するには、floatプロパティやpositionプロパティを利用するのが一般的だ。しかし、CSS 3のMulti Columnを利用すると、コンテンツ変更に伴うレイアウトの調整を省力化できるだろう。
今回は、段組み（マルチカラム）のレイアウトを実現するCSS 3の「Multi Column」の機能を紹介したい。これまではFirefoxが対応しているだけだったが、SafariがSafari 3から対応した。また、Google Chromeも対応している。
現在の段組みとMulti Columnによる段組みの違い
現在のウェブページで段組みを実現するには、floatプロパティによる回り込みや、positionプロパティによる位置指定の機能を利用するのが一般的だ。たとえば、次のサンプルではfloatプロパティを利用して2段組みを作成している。
floatプロパティで2段組みを作成したもの
※ブラウザで表示を確認する
しかし、floatプロパティやpositionプロパティを利用した段組みでは、段ごとにコンテンツを独立して扱う必要がある。そのため、1段目の最初にコンテンツを追加しても、1段目のコンテンツが増えるだけで2段目には影響しない。段ごとの高さを揃えてレイアウトのバランスを取りたい場合、1段目に記述したコンテンツを2段目に記述しなおす必要があり、コンテンツの内容を変更するたびに調節しなければならない。
1段目に画像を追加したもの。1段目と2段目の高さが変わってしまう。
※ブラウザで表示を確認する
一方、CSS 3の「Multi Column」の機能を利用した2段組みの場合、1段目にコンテンツを追加すると、1段目の末尾のコンテンツが2段目に流れ込み、2つの段の高さが均等になるように自動的に調節される。そのため、コンテンツの内容を変更しても常に各段を均等な高さで表示できるというメリットがある。
「Multi Column」の機能を利用して2段組みを作成したもの
※ブラウザで表示を確認する
1段目に画像を追加したもの。1段目と2段目は常に均等な高さで表示される
※ブラウザで表示を確認する
Multi Columnの機能を利用した段組み
- ホワイトペーパー
漫画で解説 クラウドのITリソース
HP 3PARがデータ急増時代を救う
オープンソースで実現するクラウド
2012年はDBサーバー統合始動の年！
「出入口」を固め、攻撃を防御する
クラウドサービスの事業戦略に迫る
仮想環境の確実な保護！
