概要
page-break-afterプロパティは、CSSで印刷時の改ページを制御するためのプロパティです。このプロパティを使用すると、特定の要素の後でページを分割し、新しいページから次のコンテンツを開始することができます。レポート、マニュアル、パンフレットなど、印刷物のレイアウトを整える際に非常に有効です。
page-break-afterの基本
page-break-afterプロパティは、印刷メディアにおいて要素の後に改ページを入れるかどうかを指定します。これにより、印刷時に段落やセクションの後でページを分割し、レイアウトを整理することができます。
page-break-afterの構文
element {
page-break-after: <value>;
}
<value>には以下の値を指定できます。
主な値
auto（デフォルト）: 通常の改ページの動作に従います。always要素の後で必ず改ページします。avoid要素の後で改ページを避けます。left要素の後で改ページし、次の内容を奇数ページ（左ページ）から始めます。right要素の後で改ページし、次の内容を偶数ページ（右ページ）から始めます。
page-break-afterの使用例
page-break-after: always; を使用して必ず改ページする
alwaysを使用すると、指定した要素の後で必ず改ページが行われます。新しいセクションの開始や重要な内容の強調に最適です。
使用例
h2 {
page-break-after: always;
}
<h2>第1章</h2>
<p>この章の内容がここに入ります。</p>
<h2>第2章</h2>
<p>この章は新しいページから始まります。</p>
この設定では、各章が新しいページから始まり、印刷時に見やすいレイアウトが実現します。
page-break-after: avoid; で改ページを避ける
avoidを使用すると、特定の要素の後で改ページを避けるようにします。たとえば、見出しとその直後の段落が分断されないようにする場合に有効です。
使用例
h3 {
page-break-after: avoid;
}
<h3>小見出し</h3>
<p>この小見出しと段落が同じページに収まります。</p>
この設定により、見出しとその後のテキストが同じページに収まり、視覚的な一貫性が保たれます。
page-break-after: left; と right; で左右のページを調整する
leftとrightを使用すると、要素の後でページを分割し、次のコンテンツが奇数ページ（左ページ）または偶数ページ（右ページ）から始まるようにできます。冊子や両面印刷物でページの配置を整えたい場合に便利です。
使用例
section {
page-break-after: right;
}
<section>
<h2>セクション1</h2>
<p>このセクションの内容。</p>
</section>
<section>
<h2>セクション2</h2>
<p>このセクションは偶数ページから始まります。</p>
</section>
この設定では、各セクションが偶数ページから始まり、ページの整合性が保たれます。
page-break-afterの利点と活用方法
印刷レイアウトの整理
page-break-afterを使うことで、印刷時のレイアウトを整理できます。重要なセクションの終わりでページを分割することで、見た目が整い、読者にとって読みやすいレポートや資料を作成できます。
ページの視覚的な区切りを提供
特定の要素の後でページを分けることで、印刷物に視覚的な区切りを設け、内容のまとまりを強調できます。例えば、章ごとにページを分けることで、読み手にわかりやすい構造を提供できます。
左右ページの調整でプロフェッショナルな印刷物を作成
leftやrightを使用してページの開始位置を調整することで、左右のページのバランスを取ることができ、よりプロフェッショナルな印刷物を作成できます。特に、本や冊子のような印刷物において、この調整は重要です。
使用上の注意点
ブラウザやPDFエクスポートの対応状況
page-break-afterは、印刷時のレイアウトに影響するプロパティであり、ブラウザやPDFエクスポートツールによっては完全にサポートされていない場合があります。印刷プレビューで確認しながら調整することが重要です。
過剰な改ページに注意
alwaysを多用すると、ページ数が増えて印刷コストが上がる可能性があります。重要な箇所でのみ改ページを行い、全体のバランスを考慮した設定を行うことが大切です。
まとめ
page-break-afterプロパティを使用することで、印刷時のレイアウトを柔軟に制御し、読みやすく整った印刷物を作成することができます。章の終わりやセクションの区切りなど、必要な箇所でページを分けることで、視覚的にわかりやすく整理されたレイアウトを提供します。印刷時の改ページ調整に悩んでいる方は、ぜひpage-break-afterを活用して、見栄えの良い印刷物を作成してみてください。