CSSで改ページを制御する方法｜page-breakプロパティの使い方

印刷時の改ページ（ページ送り）を制御するには、page-break-before、page-break-after、page-break-inside の3つのCSSプロパティを使用します。

指定できるキーワード

page-break-before と page-break-after は、どちらも auto / always / avoid / left / right の5つのキーワードを受け入れます。

• auto … デフォルト値です。ブラウザが必要に応じて自動的に改ページを挿入します。
• always … 要素の前または後に強制的に改ページを挿入します。
• avoid … 要素の直前または直後での改ページを抑制します。
• left / right … 1〜2回の改ページを強制し、要素が必ず左側のページ（左ページ）または右側のページ（右ページ）に表示されるようにします。

なお、page-break-inside は要素の内部での改ページを制御するプロパティで、主に auto と avoid の値を取ります。avoid を指定すれば、表や図などがページの途中で分割されるのを防げます。

実践的な使用例

改ページプロパティの使い方はとてもシンプルです。例として、ドキュメント内でレベル1の見出し（h1）が新しい章の始まりを示し、レベル2の見出し（h2）がセクションを表す構成を考えてみましょう。

この場合、「各章は必ず新しい右側のページから始めたい」けれど「セクション見出しがその後の本文とページをまたいで分断されるのは避けたい」という要件になります。

このような制御は、次のCSSルールで実現できます。

<style>
    <!--
        h1 {
            page-break-before : right
        }
        h2 {
            page-break-after : avoid
        }
    -->
</style>

このルールでは、h1要素の前に常に改ページが挿入され、章が右側のページから始まります。同時に、h2要素の直後では改ページが回避されるため、セクション見出しとその直下の本文が同じページにまとめて表示されます。

なお、近年のCSS仕様では、これらのプロパティの後継として break-before、break-after、break-inside が定義されており、画面表示と印刷の両方に対応したより汎用的な制御が可能になっています。既存の page-break-* プロパティも引き続きサポートされていますが、新規のコードでは break-* 系プロパティの併用を検討するとよいでしょう。