例

段の間の罫線の色を指定します：

div {
    -webkit-column-rule-color: #ff0000; /* Chrome, Safari, Opera */
    -moz-column-rule-color: #ff0000; /* Firefox */
    column-rule-color: #ff0000;
}

Try it Yourself ❯

定義と用法

column-rule-color プロパティは、段の間の罫線の色を設定します。

デフォルト値：	current color of the element
継承：	継承する
アニメーション可否：	可。animatable を参照 Try it
バージョン：	CSS3
JavaScript 構文：	object.style.columnRuleColor="#0000ff" Try it

ブラウザ・サポート

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

-webkit-、-moz- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

CSS 構文

プロパティの値

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

値	説明	Play it
color	罫線の色を指定する。指定可能な色の値の完全なリストについては、 CSS 色値を参照してください	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	このプロパティは親要素を継承します。inherit を参照

段数

<div> 要素内のテキストを 3 段に分割します：

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

Try it Yourself ❯

段の間隔

<div> 要素内のテキストを 3 段に分割し、段の間に 40 ピクセルの間隔を指定します。

Try it Yourself ❯

段間の罫線

段間の罫線の幅、スタイル及び色を指定します。

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

Try it Yourself ❯

CSS3 column-rule-color プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

その他の例

段数

段の間隔

段間の罫線

関連ページ