Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Page breaks

break-after は CSS のプロパティで、生成されたボックスの後で、ページ、段、領域を分割する方法を設定します。ボックスが生成されない場合は、このプロパティは無視されます。

印刷ページ分割

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
break-after
50
12
65
10
50
10
always
実験的
65
auto
50
79
65
10
50
10
avoid
50
79
50
avoid-page
50
79
10
50
10
left
50
79
65
10
50
10
page
50
79
65
10
50
10
paged context

ページングされたメディアでサポートされています
50
12
65
10
50
10
paged context.avoid-page
50
12
10
50
10
paged context.page
50
12
65
10
50
10
paged context.recto

`recto` と `verso`
recto
50
79
10
50
10
right
50
79
65
10
50
10
verso
50
79
10
50
10
その他
css.properties.break-before

break-before は CSS のプロパティで、生成されたボックスの前で、ページ、段、領域を分割する方法を設定します。ボックスが生成されない場合は、このプロパティは無視されます。
50
12
65
10
50
10
CSS プロパティ
always
実験的
65
auto
50
79
65
10
50
10
avoid
50
79
50
avoid-page
50
79
10
50
10
left
50
79
65
10
50
10
page
50
79
65
10
50
10
paged context

ページングされたメディアでサポートされています
50
12
65
10
50
10
paged context.page

`page` と `avoid-page`
50
12
65
10
50
10
paged context.recto

`recto` と `verso`
recto
50
79
10
50
10
right
50
79
65
10
50
10
verso
50
79
10
50
10
その他
css.properties.break-inside

break-inside は CSS のプロパティで、生成されたボックスの途中で、ページ、段、領域を分割する方法を設定します。ボックスが生成されない場合は、このプロパティは無視されます。
50
12
65
10
50
10
CSS プロパティ
auto
50
79
65
10
50
10
avoid
50
79
65
10
50
10
avoid-page
50
79
92
10
50
10
paged context

ページングされたメディアでサポートされています
50
12
65
10
50
10
paged context.avoid-page
51
12
92
51
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 1972340 を参照してください。
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 294559 を参照してください。
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 294559 を参照してください。
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 1972340 を参照してください。
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 294559 を参照してください。
注釈 1件
実装メモ
  • 値は認識されますが、効果はありません。 バグ 294559 を参照してください。

基本構文

CSS 
h2 {
  break-before: page;
}
.keep-together {
  break-inside: avoid;
}

ライブデモ

break-before: page

CSS Break-before: page demo.

プレビュー全画面表示

break-inside: avoid

CSS Break-inside: avoid demo.

プレビュー全画面表示

break-after: page

CSS Break-after: page demo.

プレビュー全画面表示

実務での使いどころ

  • 印刷レイアウトの最適化

    章の見出しを常に新しいページの先頭に配置したり、表や図が途中で分割されないよう制御します。

注意点

  • ブラウザによってページ区切りの処理が異なる場合があるため、印刷プレビューで実際の出力を確認してください。

アクセシビリティ

  • 印刷時のページ区切りを適切に設定することで、視覚障害のあるユーザーが拡大印刷した際の読みやすさが向上します。

参考リンク