例

段の幅と段数を指定します：

div {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

Try it Yourself ❯

定義と用法

columns プロパティは、column-width と column-count を設定するためのショートハンド・プロパティです。

デフォルト値：	auto auto
継承：	継承する
アニメーション可否：	yes, 個別のプロパティを参照してください. animatable を参照 Try it
バージョン：	CSS3
JavaScript 構文：	object.style.columns="100px 3" Try it

ブラウザ・サポート

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

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

CSS 構文

プロパティの値

プロパティ
columns	50.0 4.0 -webkit-	10.0	9.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

値	説明
auto	デフォルト値。column-width と column-count の双方を "auto" に設定します
column-width	段の幅
段数	number of columns
initial	プロパティにデフォルト値を設定します。initial を参照
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 columns プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

その他の例

段数

段の間隔

段間の罫線

関連ページ