columns

CSS の columns プロパティは、段組みされた要素の段の幅や段数を設定します。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

これは column-width と column-count の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

構文

/* 段の幅 */
columns: 18em;

/* 段数 */
columns: auto;
columns: 2;

/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* グローバル値 */
columns: inherit;
columns: initial;
columns: unset;

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

値

<'column-width'>

<length> 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。

<'column-count'>

正の <integer> のみで、要素の中で流れる理想的な段数を記述します。 column-width が auto 以外の値で一緒に設定された場合は、最大の段数を示します。

構文形式

<'column-width'> || <'column-count'>

例

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

.content-box {
  columns: 3 auto;
}

結果

仕様策定状況

ブラウザーの対応