CSS 参考書

CSS @規則(RULES)

CSS 属性全書

CSS3 column-rule-style 属性 CSS3 column-rule 属性

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

column-rule-color属性は、多列レイアウト内の列間に描かれるすべてのルールの色を設定します。

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

デフォルト値：	現在color要素値
適用：	多列要素
継承：	ありません
アニメーション可能：	は。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.columnRuleColor="#ff00ff"

列ルールの色の使用構文

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

column-rule-color:　color　|　initial　|　inherit

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

例

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

テストして‹/›

属性値

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

値	説明
color	列ルールの色を指定します。以下のいずれかの有効なCSS色値。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のcolumn-rule-colorの属性値。

ブラウザ互換性

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

	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-style 属性 CSS3 column-rule 属性