Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Column breaks

カラムレイアウト内で、特定の要素の前後で列を区切ったり、要素が列をまたいで分割されることを防いだりできます。見出しの直前で新しい列を開始したり、カード要素が途中で切れないようにするなど、レイアウトの品質を向上させます。印刷時のページ区切りにも同じプロパティが使用されます。

マルチカラムブレーク制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.break-after.avoid-column
50
79
10
50
10
CSS プロパティ
column
50
79
10
50
10
multicol context

複数列レイアウトでのサポート
50
12
65
50
multicol context.avoid
102
102
102
multicol context.avoid-column
102
102
102
multicol context.column
50
12
50
avoid-column
50
79
10
50
10
column
50
79
10
50
10
multicol context

複数列レイアウトでのサポート
50
12
65
50
multicol context.avoid
102
102
102
multicol context.avoid-column
102
102
102
multicol context.column
51
12
51
avoid-column
50
79
92
10
50
10
multicol context

複数列レイアウトでのサポート
50
12
65
10
50
10
multicol context.avoid-column
50
12
92
10
50
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 印刷モードでのみサポートされます。 バグ 1675322 を参照してください。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 印刷モードでのみサポートされます。 バグ 1675322 を参照してください。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)

基本構文

CSS 
.card {
  break-inside: avoid;
}
h2 {
  break-before: column;
  break-after: avoid;
}

ライブデモ

break-inside: avoid

CSS Break-inside: avoid demo.

プレビュー全画面表示

break-before: column

CSS Break-before: column demo.

プレビュー全画面表示

break-after: avoid

CSS Break-after: avoid demo.

プレビュー全画面表示

実務での使いどころ

  • カラムレイアウトの分割制御

    カード要素や画像ブロックが列の途中で分割されないよう break-inside: avoid を設定し、レイアウトの完全性を保てます。

注意点

  • Chrome/Edgeのみのサポートで、SafariとFirefoxでは未実装です。マルチカラムレイアウトの重要な制御に使う場合はブラウザ対応を確認してください。

アクセシビリティ

  • 列の分割制御はレイアウトの視覚的な品質に関するもので、コンテンツの読み順やアクセシビリティには影響しません。

参考リンク