CSS3の新プロパティ「columns」

goto_jp 282views 更新:2014年3月31日

名前の通りカラム分けを行ってくれるCSSプロパティです。
ベンダープレフィックス付きで下記のように記述します。

.columnBox {
  -webkit-columns: 100px 3;
  -moz-columns: 100px 3;
  -ms-columns: 100px 3;
  -o-columns: 100px 3;
  columns: 100px 3;
  //columns: 1カラム当りの最小幅 カラム数
}

HTMLは下記のようにして使います。
columns を指定した箱自体ではなく、中の要素を自動的にカラム分けしてくれます。

<div class="columnBox">
  <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
  <p>かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ</p>
  <p>さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ</p>
  <p>たちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてと</p>
  <p>なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの</p>
</div>

上記の例を実際にブラウザに表示すると下記のようになります。
※IEは10から対応しています。

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ

さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ

たちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてと

なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの

このプロパティもCompassでベンダープレフィックス無しで楽に書けます。

.columnBox {
    @include columns(100px 3);
}

文章の段組が楽になるプロパティですね。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません