menu
menu

キーワード検索

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

  • CSS

column-rule

こんにちは(・∀・)

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

概要

column-ruleプロパティはcolumn-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの値を一括で指定できるプロパティです。半角スペースで区切って順不同で指定する事ができます。省略された値はそのプロパティの初期値に設定されます。


.sample {
	column-rule: 2px solid blue;
}
適用要素

段組されている要素

指定できる値

column-rule-widthプロパティで指定できる値
column-rule-styleプロパティで指定できる値
column-rule-colorプロパティで指定できる値

初期値

個別プロパティの初期値

サンプルデモ

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

HTML

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

.demo {
	column-count: 2;
	column-rule: 2px solid #d49fc2;
	-moz-column-count: 2;
	-moz-column-rule: 2px solid #d49fc2;
	-webkit-column-count: 2;
	-webkit-column-rule: 2px solid #d49fc2;
	-o-column-count: 2;
	-o-column-rule: 2px solid #d49fc2;
}

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

  • カテゴリー:CSS