column-count

CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。

この対話型サンプルのソースファイルは 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 以外の値で一緒に設定された場合は、最大の列数を示します。

構文形式

<integer> | 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;
}

結果

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• 段組みレイアウト (レイアウトの学習)
• 段組みの基本概念