menu
menu

キーワード検索

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

  • CSS

column-width

こんにちは(・∀・)

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

概要

column-widthプロパティを使用してその段組の幅を指定する事ができます。



.sample {
	column-width: 10em;
}
適用要素

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

指定できる値
数値+単位
段の幅を数値+単位で指定します。実際に表示される幅は状況に応じて変化します。
auto
auto以外の値を持つcolumn-countなど他のプロパティによって決まります。
初期値

auto

サンプルデモ

段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。

HTML

<p class="demo">
段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。
</p>
CSS

.demo {
	column-width: 10em;
	-moz-column-width: 10em;
	-webkit-column-width: 10em;
	-o-column-width: 10em;
}

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

  • カテゴリー:CSS