Widely available YES。全ブラウザで長期サポート済み。段組みレイアウトに最適。

Multi-column layout

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

レイアウトテキスト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
column-count
50
12
52
9
50
9
multicol context

複数列レイアウトでのサポート
123
123
17.4
123
17.4
auto
1
12
1.5
3
18
2
その他
css.properties.column-gap

column-gap は CSS のプロパティで、要素の段または列の間のすき間（gutters）の寸法を設定します。
1
12
1.5
3
18
2
CSS プロパティ
multicol context

複数列レイアウトでのサポート
50
12
52
10
50
10
multicol context.calc values

`calc()` の値
66
16
61
12.1
66
12.2
multicol context.percentage values

`<パーセント>` 値
66
16
61
12
66
12
normal
1
12
1.5
3
18
2
その他
css.properties.column-rule

column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さ、スタイル、色を設定します。
50
12
52
9
50
9
css.properties.column-rule-color

column-rule-color は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の色を設定します。
50
12
52
9
50
9
CSS プロパティ
transparent
1
12
3.5
3
18
2
その他
css.properties.column-rule-style

column-rule-style は CSS のプロパティで、段組みレイアウトで段の間に引かれる線（段間罫）のスタイルを設定します。
50
12
52
9
50
9
CSS プロパティ
dashed
1
12
3.5
3
18
2
dotted
1
12
3.5
3
18
2
double
1
12
3.5
3
18
2
groove
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
inset
1
12
3.5
3
18
2
none
1
12
3.5
3
18
2
outset
1
12
3.5
3
18
2
ridge
1
12
3.5
3
18
2
solid
1
12
3.5
3
18
2
その他
css.properties.column-rule-width

column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さを設定します。
50
12
52
9
50
9
CSS プロパティ
medium
1
12
3.5
3
18
2
thick
1
12
3.5
3
18
2
thin
1
12
3.5
3
18
2
dashed
1
12
3.5
3
18
2
dotted
1
12
3.5
3
18
2
double
1
12
3.5
3
18
2
groove
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
inset
1
12
3.5
3
18
2
medium
1
12
3.5
3
18
2
none
1
12
3.5
3
18
2
outset
1
12
3.5
3
18
2
ridge
1
12
3.5
3
18
2
solid
1
12
3.5
3
18
2
thick
1
12
3.5
3
18
2
thin
1
12
3.5
3
18
2
transparent
1
12
3.5
3
18
2
その他
css.properties.column-width

column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、指定された幅よりも狭い単一の段になることがあります。
50
12
50
9
50
9
CSS プロパティ
auto
1
12
1.5
3
18
2
その他
css.properties.columns

columns は CSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。
50
12
52
9
50
9
CSS プロパティ
multicol context

複数列レイアウトでのサポート
66
16
61
14.1
66
14.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1.5)
実装メモ
  • バージョン 37 より前では、複数の列は `display: table-caption` 要素では機能しませんでした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1.5)
実装メモ
  • Firefox 3 より前では、「normal」キーワードのデフォルト値は「1em」ではなく「0」でした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3.5)
実装メモ
  • Firefox 3 より前では、「normal」キーワードのデフォルト値は「1em」ではなく「0」でした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1.5)
実装メモ
  • バージョン 37 より前では、複数の列は `display: table-caption` 要素では機能しませんでした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (50)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (9)
実装メモ
  • バージョン 37 より前では、複数の列は `display: table-caption` 要素では機能しませんでした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (50)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3.2)

基本構文

CSS 
.article-body { column-count: 3; column-gap: 2rem; column-rule: 1px solid #ddd; } /* width-based auto-columns */ .list-columns { column-width: 200px; column-gap: 1.5rem; }

ライブデモ

column-count: 2

Multi-column layout Column-count: 2 demo.

プレビュー全画面表示

Column-rule with

Multi-column layout Column-rule with demo.

プレビュー全画面表示

Column-width(automulticol only)

Multi-column layout Column-width(automulticol only) demo.

プレビュー全画面表示

実務での使いどころ

  • 記事の段組みレイアウト

    長文の記事を複数カラムに分割し、新聞のような読みやすいレイアウトを実現する。

  • リストの分割表示

    長いリスト（用語集やナビゲーション一覧）を複数カラムに分割して縦方向のスペースを節約する。

注意点

  • カラム途中での要素の分断を防ぐには break-inside: avoid を指定する必要がある。
  • 画像やテーブルなどの固定幅要素がカラム幅を超えるとレイアウトが崩れる場合がある。

アクセシビリティ

  • 段組みはテキストの流れが左上から右下に続くため、読み上げ順序は DOM 順のままで問題ない。ただし段が細すぎると可読性が低下する。

参考リンク