【CSS】Webページを印刷する時に改ページの設定を追加する

Web ページを印刷する際に、特定のコンテンツ間で改ページさせたい、という要望があったので、その手順についてのまとめです。
初めて使ったのですが…そもそも CSS で改ページってできるんですね…！

参考にさせていただいた記事はこちらから。

HTMLを上手に改ページしてきれいに印刷する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/25162

やり方は簡単で、改ページしたい要素の最後に break-after プロパティを追加する、または改ページの次のページの先頭にある要素の上に break-before プロパティを追加するだけです！
break-after と break-before の違いは下記のとおりです。

• break-before…指定した要素の前で改ページする
• break-after…指定した要素の後で改ページする

サンプルコードは下記のとおりです。

<div id="page1">
  <p>1ページ目です</p>
</div>
<div id="page2">
  <p>2ページ目です</p>
</div>

#page2 {
  break-before: page;
}

ブラウザ上では見た目は変わりませんが、印刷プレビューで確認すると、きちんと改ページされていることが確認できます。
なお、CSS は下記のように記述してもOKです。

#page1 {
  break-after: page;
}

こちらの使い分けについては、自分が使いやすい・分かりやすい方でいいと思います。

以上、Web ページを印刷する際に、CSS で改ページを行う方法についてでした。
ご参考になれば幸いです。