例

段の間の罫線のスタイルを指定します：

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

Try it Yourself ❯

定義と用法

column-rule-style プロパティは、段の間の罫線のスタイルを設定します。

ブラウザ・サポート

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

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

CSS 構文

プロパティの値

デフォルト値：	なし
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.columnRuleStyle="dotted" Try it

プロパティ
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

values values

値	説明	Play it
none	デフォルト値。罫線を表示しません	Play it ❯
hidden	罫線を表示しません	Play it ❯
点線の罫線を定義します	Defines a dotted rule	Play it ❯
dashed	破線の罫線を定義します	Play it ❯
solid	実線（単線）の罫線を定義します	Play it ❯
double	二重線の罫線を定義します	Play it ❯
groove	立体的に窪んだように見える罫線を指定します。効果は幅と色に依存します	Play it ❯
ridge	立体的に隆起したように見える罫線を指定します。効果は幅と色に依存します	Play it ❯
inset	内側が窪んだように見える罫線を指定します。効果は幅と色に依存します	Play it ❯
outset	内側が隆起したように見える罫線を指定します。効果は幅と色に依存します	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-style プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

その他の例

段数

段の間隔

段間の罫線

関連ページ