【CSS Modules】page-break-beforeプロパティの使い方

page-break-beforeプロパティは、印刷時やページ化されたメディアにおいて、特定の要素の直前に改ページを挿入するかどうか、またどのように挿入するかを制御するプロパティです。このプロパティは、ウェブページを紙媒体に出力する際などに、内容の区切りを適切に調整するために利用されます。

具体的には、例えば文書の新しい章のタイトルにpage-break-before: always;を設定することで、その章が必ず新しいページの先頭から始まるように指定できます。これにより、前の章の途中でページが切れ、新しい章のタイトルだけが残り、本文が次ページに続くといった不自然なレイアウトを防ぐことが可能です。また、page-break-before: avoid;を設定すると、特定の要素の直前での改ページを避けるようにブラウザに指示し、例えば画像とその説明文が異なるページに分かれてしまうことを防ぐことができます。

さらに、leftやrightといった値を指定することで、改ページ後に次のページが必ず左ページまたは右ページになるように調整することも可能です。これは、書籍のような左右見開きのレイアウトを想定する場合に特に役立ちます。

このプロパティは画面表示には影響せず、主に印刷時のレイアウト調整に特化しています。現在では、より新しいCSS Fragmentation Moduleで定義されているbreak-beforeプロパティが推奨されていますが、既存のコードや古いブラウザへの対応のために、このpage-break-beforeプロパティの役割を理解しておくことは重要です。

Copy
1.new-section {
2  page-break-before: always;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません