強制的に改ページする
指定した要素の前または後ろで強制的に改ページしたい場合は、以下のCSSクラスを設定します。
CSS
/* 要素の前で改ページする場合 */
「.page-break {
break-before: page;
}」
/* 要素の後ろで改ページする場合 */
「.page-break-after {
break-after: page;
}」
実際の使用例
HTML上でページを区切りたい箇所に div や section タグを配置し、CSSを適用します。
html
「<div class="page">
<h1>1ページ目の内容</h1>
<p>ここに内容が入ります。</p>
</div>
<div class="page">
<h1>2ページ目の内容</h1>
<p>ここに内容が入ります。</p>
</div>」css
/* 最後のページ以外で改ページを強制する */
「.page:not(:last-child) {
break-after: page;
}」