Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2011年03月04日

CSS3 Columns を試してみる

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 になった.当然ながら対応していないブラウザは段組にならない.

参考

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

 |