CSS

page-break-before is a CSS property that forces a page break before an element when printing, placing it at the top of a new page.

page-break-before

　page-break-beforeは、印刷やページ分割が必要となるメディア（たとえば印刷用スタイルシート）において、指定した要素を「次のページの先頭に移動させる（強制改ページする）」ための CSSプロパティです。HTMLドキュメントを印刷する際、要素がページをまたいで読みづらくならないようにするためによく使用されます。

基本的な動作と指定できる値

page-break-before: auto;
特に指定しない場合のデフォルト（初期値）。ブラウザ（プリンター）の判断に任せるため、自動的にページ分割が行われます。
page-break-before: always;
要素の直前で必ず改ページを行います。印刷したとき、要素が必ず新しいページの先頭に来るようになります。
page-break-before: avoid;
できる限り改ページを行わないようにします（ただしブラウザやプリンターの実装状況により、思った通りに動作しない場合もあります）。
page-break-before: left;
新しいページが “左ページ” になるように強制的にページを進めます。両面印刷を想定して、「左ページ（偶数ページ側）に必ず要素を配置したい」という場合に用いられます。
page-break-before: right;
新しいページが “右ページ” になるように強制的にページを進めます。こちらも両面印刷の際、奇数ページに配置したい要素に利用します。

実際の使用例

CSS

h2 {
	page-break-before: always;
}

　この例では、見出し（<h2>）が新しいページの先頭に来るようになります。章の始まりや節ごとにページを変えたい場合などに便利です。

page-break-* プロパティ全体の概要

　印刷などのページレイアウトを扱う際には、次のプロパティと合わせて利用されるケースが多いです。

page-break-before
要素の前で強制的に改ページするかどうかを指定。
page-break-after
要素の後で強制的に改ページするかどうかを指定。
page-break-inside
要素の途中でページ分割を避けるかどうかを指定。

　これらを組み合わせることで、「見出し前後でページを分割する」「表はできるだけページをまたがないようにする」など、より複雑なページ指定が可能になります。たとえば、見出しは常に新しいページの始まりに配置したいが、表はページをまたがないように極力配置したい、というケースです。

新しい仕様（break-before との関係）

　CSS 2.1 の仕様で定義されている page-break-before / page-break-after / page-break-inside は、現在の CSS規格では主に後方互換性のために残されているものと考えられています。より新しい規格では、以下のように break-before / break-after / break-inside といったプロパティが用意されています。

CSS

h2 {
	break-before: page;
}

　新しいプロパティは、ページだけでなく、フレームやカラムなどさまざまな要素の分割を扱う場面で幅広く使えるよう拡張されています。しかし、依然として多くのユーザーエージェント（ブラウザやプリンター）は page-break-* プロパティをサポートしているため、既存の印刷対応 CSS では互換性のために使用されることが多いです。

留意点

ブラウザやプリンターの対応状況
改ページの扱いは、ブラウザやプリンターの実装、または PDF 生成ツールなどのソフトウェアに依存することが多いです。すべてが期待通りに動作するわけではないため、最終的なレイアウトは必ず確認しましょう。
画面表示用には無効な場合が多い
page-break-before は印刷や PDF 生成時などの “paged media” を前提としています。通常のモニター画面で表示するときにこのプロパティを指定しても、改ページは視覚的にはほとんど意味を持ちません。そのため、印刷用スタイルシート（@media print { ... }）内で記述するのが一般的です。
新しいプロパティへの移行
すでに大規模の印刷専用スタイルシートを持っている場合は page-break-* プロパティをそのまま使うケースが多いですが、新規作成時や先々の保守性を考慮すると、break-before/after/inside プロパティに移行するほうがよい場合があります。