CSScolumn-count プロパティは、指定された段数で要素のコンテンツを分割します。

構文

/* キーワード値 */
column-count: auto;

/* <integer> 値 */
column-count: 3;

/* グローバル値 */
column-count: inherit;
column-count: initial;
column-count: unset;

auto
段数は column-width など、他の CSS プロパティによって決定されます。
<integer>
正の整数のみで、要素の中で流れる理想的な列の数を記述します。 column-widthauto 以外の値で一緒に設定された場合は、最大の列数を示します。

形式文法

<integer> | auto

HTML

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

CSS

.content-box {
  column-count: 3;
}

結果

仕様書

仕様書 状態 備考
CSS Multi-column Layout Module
column-count の定義
草案 初回定義

初期値auto
適用対象Block containers except table wrapper boxes
継承なし
メディア視覚
計算値指定値
アニメーションの種類integer
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 52
完全対応 52
完全対応 1.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 11.1
完全対応 11.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 50Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 52
完全対応 52
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -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 ?

凡例

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

関連情報

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

このページの貢献者: mfuji09, Sebastianz, fscholz, teoli, ethertank, Sheppy, Marsf
最終更新者: mfuji09,