CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */ column-count: auto; /* <integer> 値 */ column-count: 3; /* グローバル値 */ column-count: inherit; column-count: initial; column-count: unset;
値
auto- 段数は
column-widthなど、他の CSS プロパティによって決定されます。 <integer>- 正の
整数のみで、要素の中で流れる理想的な列の数を記述します。column-widthがauto以外の値で一緒に設定された場合は、最大の列数を示します。
形式文法
<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 |
| 正規順序 | 構文通り |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome
完全対応
50
| Edge
完全対応
12
| Firefox
完全対応
52
| IE 完全対応 10 | Opera
完全対応
11.1
| Safari
完全対応
3
| WebView Android 完全対応 あり | Chrome Android 完全対応 50 | Edge Mobile
完全対応
あり
| Firefox Android
完全対応
52
| Opera Android
完全対応
あり
| Safari iOS
完全対応
あり
| Samsung Internet Android 完全対応 5.0 |
On display: table-caption | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 37 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android ? | Edge Mobile 完全対応 あり | Firefox Android 完全対応 37 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。