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
継承不可
メディアvisual
計算値指定値
Animation typeinteger
正規順序per grammar

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート

50

有り -webkit-

有り

有り -webkit-

52

1.5 -moz-

10

11.1

15 -webkit-

3 -webkit-
On display: table-caption 有り 有り37 有り 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 有り50

有り

有り -webkit-

52

4 -moz-

有り

有り -webkit-

有り

有り -webkit-

?
On display: table-caption 有り ? 有り37 有り 有り ?

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

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