【CSS3リファレンス】column-count

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-countです。

概要

column-countプロパティはその要素の中を何段組で表示させるのか指定する事ができるプロパティです。テキストの量や文字サイズの変化に応じて段組は変わってきます。段組レイアウトは、要素自体を並べるボックスレイアウトと異なり、その要素の中を段組にします。

.sample {
  column-count: 3;
}

適用要素

ブロックレベル要素（置換要素、table要素は除く）th要素、td要素、inline-blockの要素

指定できる値

数値

1以上の整数で指定
column-widthでauto以外の値が指定されている場合はここで指定した段数は最大の段数になります。表示可能な幅がなければ指定した段数より少なく表示されます。

auto

auto以外の値を持つcolumn-widthなど他のプロパティによって決まる

初期値

auto

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.
</p>

CSS

.demo {
  -webkit-column-count: 3;
  column-count: 3;
}

サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

Result