columns
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
columns
は CSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 段の幅 */
columns: 18em;
/* 段数 */
columns: auto;
columns: 2;
/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* グローバル値 */
columns: inherit;
columns: initial;
columns: revert;
columns: unset;
columns
プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。
値
<'column-width'>
-
理想的な段の幅であり、
<length>
またはauto
キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。column-width
を参照してください。 <'column-count'>
-
要素の内容物が流れる理想的な段の数であり、
<integer>
またはauto
キーワードで定義します。この値と段の幅の両方がauto
でない場合は、最大の段数を示します。column-count
を参照してください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | 表ラッパーボックスを除くブロックコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
例
3 つの等しい段の設定
HTML
html
<p class="content-box">
This is a bunch of text split into three columns using the CSS `columns`
property. The text is equally distributed over the columns.
</p>
CSS
css
.content-box {
columns: 3 auto;
}
結果
仕様書
Specification |
---|
CSS Multi-column Layout Module Level 1 # columns |
ブラウザーの互換性
BCD tables only load in the browser