CSScolumns プロパティは、段組みされた要素の段の幅や段数を設定します。

これは column-widthcolumn-count の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

構文

/* 段の幅 */
columns: 18em;

/* 段数 */
columns: auto;
columns: 2;

/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* グローバル値 */
columns: inherit;
columns: initial;
columns: unset;

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

<'column-width'>
<length> 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり(余白を埋めるため)、より狭くなったり(利用可能なスペースが指定された段の幅よりも小さい場合のみ)します。この値は正の数だけで、そうでなければ宣言は無効になります。
<'column-count'>
正の <integer> のみで、要素の中で流れる理想的な段数を記述します。 column-widthauto 以外の値で一緒に設定された場合は、最大の段数を示します。

構文形式

<'column-width'> || <'column-count'>

HTML

<p class="content-box">
  This is a bunch of text split into three columns
  using the CSS `columns` property. The text
  is equally distributed over the columns.
</p>

CSS

.content-box {
  columns: 3 auto;
}

結果

仕様策定状況

仕様書 策定状況 コメント
CSS Multi-column Layout Module
columns の定義
草案 初回定義。

初期値一括指定の各プロパティとして
適用対象Block containers except table wrapper boxes
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 50
完全対応 50
完全対応 50
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 52
完全対応 52
完全対応 9
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 11.1
完全対応 11.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 50Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 52
完全対応 52
完全対応 22
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 11.5
完全対応 11.5
完全対応 32
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
On display: table-captionChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 37IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 37Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: u_7cc, mfuji09, Sebastianz, Prinz_Rana, fscholz, ethertank, sosleepy
最終更新者: u_7cc,