CSSリファレンスマニュアル

CSS @ルール(RULES)

CSS属性全書

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

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

column-rule-width CSS属性は、多列レイアウトの列間に描かれるルールの幅を設定します。

以下のテーブルには、この属性の使用方法とバージョンヒストリー、およびJavaScriptスクリプトでの使用方法が記載されています。

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

column-rule-widthの使用方法の構文

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

column-rule-width:　length　|　medium　|　thin　|　thick　|　initial　|　inherit

以下の例では、columnを使用する方法を示しています。-rule-width属性。

例

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;
}

テストを試してみる‹/›

属性値

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

値	説明
length	絶対または相対単位で表される長さで、ルールの幅を指定するために使用されます。
medium	中程度のルールを定義します。デフォルト値です。
thin	細いルールを定義します。幅がデフォルト値を下回ります。
thick	厳格なルールを定義します。幅がデフォルト値を超過します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のcolumnに対応します。-rule-widthの属性値。

ブラウザの互換性

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

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

さらに詳しく

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

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