CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
この対話型サンプルのソースファイルは 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以外の値で一緒に設定された場合は、最大の列数を示します。
形式文法
例
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 |
|---|---|
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。