CSSのpage-break-before・page-break-after・page-break-insideプロパティの使い方

改ページ制御プロパティとは

CSSの改ページ関連プロパティを使うと、印刷やPDF出力の際にコンテンツがどこで改ページされるかを細かく制御できます。主なプロパティは以下の3つです。

• page-break-before：要素の直前で改ページするかどうかを指定
• page-break-after：要素の直後で改ページするかどうかを指定
• page-break-inside：要素の内部での改ページを許可するかどうかを指定

page-break-beforeとpage-break-afterの実用例

たとえば、レベル1の見出し（h1）で新しい章を開始し、レベル2の見出し（h2）でセクションを区切る文書を考えてみましょう。各章は必ず新しい右側のページから始めたい一方で、セクション見出しが改ページによって直後の本文と分断されるのは避けたいはずです。このような要件は、次のルールで実現できます。

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

page-break-before: rightを指定すると、h1要素の直前で改ページが行われ、章が常に右側のページから始まります。また、page-break-after: avoidを指定することで、h2見出しの直後での改ページが回避され、見出しとその本文が同じページに収まるようになります。

page-break-insideでテーブルの分割を防ぐ

page-break-insideプロパティには、autoとavoidの値のみを使用します。テーブルが可能な限りページをまたいで分割されないようにしたい場合は、次のように記述します。

<style>
   <!--
      table { page-break-inside : avoid }
   -->
</style>

これにより、テーブルが1ページに収まらない特別な場合を除き、途中で分割されることがなくなります。

補足：現代のCSSではbreakプロパティが推奨

なお、これらのpage-break系プロパティはCSS3でbreak-before、break-after、break-insideプロパティへと拡張されました。新しいプロジェクトでは後者の使用が推奨されていますが、page-break系プロパティも後方互換性のために引き続き広くサポートされています。