CSSプロパティpage-break-after：印刷時の改ページを制御
page-break-after プロパティは、印刷時に指定した要素の*後*に改ページを挿入するかどうかを制御します。
このプロパティは、印刷レイアウトを細かく調整したい場合に役立ちます。
適用要素
page-break-after プロパティは、ブロックレベル要素に適用されます。
構文と値
/* キーワード値 */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
/* グローバル値 */
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: unset;
値の説明
| 値 | 説明 |
|---|---|
auto |
デフォルト値。ブラウザが自動的に改ページを処理します。 |
always |
指定した要素の後に必ず改ページを挿入します。 |
avoid |
指定した要素の後に改ページを挿入しないようにします。 |
left |
指定した要素の後に改ページを挿入し、次のページの*左側*に印刷します（両面印刷の場合のみ）。 |
right |
指定した要素の後に改ページを挿入し、次のページの*右側*に印刷します（両面印刷の場合のみ）。 |
inherit |
親要素から page-break-after プロパティの値を継承します。 |
initial |
このプロパティをデフォルト値に設定します。 |
revert |
ブラウザのデフォルトスタイルシートで設定されている値に戻します。 |
unset |
このプロパティが継承されたプロパティの場合は inherit のように動作し、そうでない場合は initial のように動作します。 |
使用例
1. 強制的に改ページを挿入する
以下のコードは、<h2> 要素の後に強制的に改ページを挿入し、次のセクションが新しいページから始まるようにします。
<h2>第一節</h2>
<p>...</p>
<h2 style="page-break-after: always;">第二節</h2>
<p>...</p>
2. 改ページを回避する
以下のコードは、<table> 要素の後に改ページが挿入されないようにし、表の内容が1ページに収まるようにします。
<table>
...
</table>
<p style="page-break-after: avoid;">表の説明</p>
3. 両面印刷を制御する
以下のコードは、セクションの見出しが常に新しいページの右側に配置されるようにします。
h2 {
page-break-after: right;
}
注意事項
page-break-afterプロパティは、印刷時のみ有効です。画面上では何も影響はありません。- このプロパティは、浮動要素と絶対配置要素には無効です。
page-break-afterプロパティのサポートはブラウザによって異なる場合があります。使用する前にテストすることをお勧めします。
参考文献
Q&A
1. page-break-after と page-break-before の違いは何ですか？
page-break-after は指定した要素の*後*に改ページを挿入するのに対し、page-break-before は指定した要素の*前*に改ページを挿入します。
2. page-break-after プロパティが効かない場合はどうすればよいですか？
page-break-after プロパティが効かない場合は、以下の点を確認してください。
- 要素がブロックレベル要素であることを確認してください。
- 要素に
display: none;などの表示に関するスタイルが適用されていないことを確認してください。 - ブラウザの印刷プレビューで確認してください。
3. page-break-after プロパティはレスポンシブデザインでどのように使用できますか？
メディアクエリを使用して、画面サイズや印刷設定に応じて page-break-after プロパティの値を変更できます。
例えば、印刷時にのみ page-break-after: always; を適用するには、以下のように記述します。
@media print {
h2 {
page-break-after: always;
}
}