CSS3：簡単に段組を作れる「columns」プロパティ

上記は実際にCSS3のプロパティ「columns」を使って作った段組です。

以前はfloatを用いて「ここまでは一段目、ここまでは二段目…」と個別に段組を意識しながら作る必要がありましたし、文中で次の段に飛ばすなんてことは不可能でしたが、columnsは単純に連続したテキストを自動的に段組化してくれます。

CSS

.columns {
  -webkit-columns: 3;
  -moz-columns: 3;
  -ms-columns: 3;
  columns: 3;
}

上記のように、まだベンダープレフィックス付きの記述が必要ですが、値としては分けたい段組の数を記入するのみです。

HTML

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

HTMLは上記のようになります。

段組を意識することなくテキストを流し込んでいるのみです。

段組のレスポンシブ対応

.columns {
  -webkit-columns: 200px 3;
  -moz-columns: 200px 3;
  -ms-columns: 200px 3;
  columns: 200px 3;
}

上記のように、段組ひとつ当りの最低幅を指定することができます。

段組が最低幅を下回る場合、段組が解除され平坦な並びになるのですが、最低幅を設定しておくだけで事実上レスポンシブ対応になります。

IE9以前ではcolumnsは使えませんが、10以下はブラウザシェアも下がりつつあるので利用価値の高いプロパティです。