CSS3 Columns を試してみる

css

Opera 11.10 の最新 weekly で CSS3 Columns なるものが使えるようになったので早速試してみた．
CSS3 Columns は簡単にいうと今まで float や position などを使って行っていた段組を簡単に行えるプロパティたち．
導入したのはこのブログのフッタ部分.

HTML

<div id="footer">
   <div class="section">
   </div>
<!-- 中略 -->
   <div class="section">
   </div>
</div>

CSS

#footer {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

#footer div.section {
break-inside: avoid;
}

解説

column-count プロパティでカラム数を決める．これだけで指定したカラム数で要素の中のものをきれいに段組してくれる．しかしこれだけだと中途半端なところで別カラムに移動してしまう場合があるので， div.section で分かれていほしくない要素を囲み，break-inside: avoid を指定して途中で切れないようにしている．
CSS3 Columns を使う前とは少し違う段組になっているもののわかりやすい HTML になった．当然ながら対応していないブラウザは段組にならない．

参考