menu
menu

キーワード検索

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

  • CSS

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">
段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。
</p>
CSS

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

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

  • カテゴリー:CSS