CSS 参考マニュアル

CSS @ルール(RULES)

CSS 属性全書

CSS3 column-rule-color 属性 CSS3 column-gap 属性

CSS3 column-rule属性の使用方法と例

olumn-rule CSS属性は各列間に描画される一つの線を指定します、つまり「ルール」。これは一つの属性を設定する短縮属性であり、同時にcolumn-rule-width、column-rule-styleおよびcolumn-rule-color。

以下のテーブルはこの属性の使用方法とバージョンハイストリと、JavaScriptスクリプトでの使用文法を示しています。

デフォルト値：	すべての属性を表示
適用：	多列要素
継承：	ありません
アニメーション可能：	はい、速記の一部の属性はアニメーションを設定できます。参照してくださいアニメーション属性。
バージョン：	CSS3の新しい機能
JavaScript文法：	object.style.columnRule="3px outset #ff00ff"

column-ruleの使用文法

この属性の文法は以下の通りです：

column-rule:　[　column-rule-width　column-rule-style　column-rule-color　]　|　initial　|　inherit

以下の例では、column-rule属性。

例

p　{
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px　solid　red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px　solid　red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px　solid　red;
}

テストして見て‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
column-rule-width	列間のルール幅を設定します。デフォルト値はmediumです。負の値を使用することはできません。
column-rule-style	列間のルールスタイルを設定します。デフォルト値は無しです。
column-rule-color	列間のルール色を設定します。デフォルト値はcolorの要素。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素column-ruleの属性値。

ブラウザの互換性

column-rule属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 2+ ^-moz- Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 3.1+ ^-webkit- Opera 11.1+ ^-o-、15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3多列レイアウト。

CSS3 column-rule-color 属性 CSS3 column-gap 属性