CSS3 column-rule-style Property

例

列間のルールのスタイルを指定：

div {
    -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
    -moz-column-rule-style: dotted; /* Firefox */
    column-rule-style: dotted;
}

»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

コラム・ルールスタイルのプロパティは、カラム間のルールのスタイルを指定します。

デフォルト値：	none
継承されました：	no
アニメーション：	no. Read about animatable
バージョン：	CSS3
JavaScriptシンタックス：	object .style.columnRuleStyle="dotted" Try it

ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。

プロパティ
column-rule-style	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

CSSの構文

プロパティ値

値	説明	それを再生します
none	デフォルト値。何のルールを定義していません	それを再生します»
hidden	隠されたルールを定義します	それを再生します»
dotted	点線のルールを定義します	それを再生します»
dashed	破線のルールを定義します	それを再生します»
solid	固体ルールを定義します	それを再生します»
double	二重のルールを定義します	それを再生します»
groove	3D溝付きルールを指定します。効果は、幅と色値に依存します	それを再生します»
ridge	3D畝ルールを指定します。効果は、幅と色値に依存します	それを再生します»
inset	3Dのはめ込みルールを指定します。効果は、幅と色値に依存します	それを再生します»
outset	3D最初のルールを指定します。効果は、幅と色値に依存します	それを再生します»
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます	それを再生します»
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

列カウント

内のテキスト割り<div>の3つの列に要素を：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

»それを自分で試してみてください

カラムギャップ

内のテキスト割り<div>の3つの列に要素を、列間の40ピクセルのギャップを指定します。

»それを自分で試してみてください

列のルール

列間のルールの幅、スタイル、色を指定します。

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

»それを自分で試してみてください

CSS 参照

CSS プロパティ

CSS3 column-rule-style Property

例

定義と使用法

ブラウザのサポート

CSSの構文

プロパティ値

その他の例

列カウント

カラムギャップ

列のルール

関連ページ