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 をチェックアウトしてプルリクエストを送信してください。