columns

columnsCSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の 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

関連情報