カテゴリー: ホームページ作成

https://www.google.com/search?sca_esv=75d6586d45596069&sxsrf=APpeQnusFqHqQiqrFPi6QkgY40c5c0vgsg%3A1785506150344&q=Html+%E6%94%B9+%E3%83%9A%E3%83%BC%E3%82%B8+%E5%8D%B0%E5%88%B7&sa=X&ved=2ahUKEwi9m9feiP2VAxWyqFYBHdREHUAQ1QJ6BAgzEAE&biw=2560&bih=1271&dpr=1.5

強制的に改ページする

指定した要素の前または後ろで強制的に改ページしたい場合は、以下の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;
}」