CSS page-break-before プロパティ
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
警告:
このプロパティは break-before プロパティによって置き換えられました。
page-break-before は CSS のプロパティで、現在の要素の前で改ページが行われるように調整します。
試してみましょう
page-break-before: auto;
page-break-before: always;
<div>
<p>
このプロパティの効果は、ドキュメントを印刷する際や、印刷プレビューを表示させた際に確認できます。
</p>
<button id="print-btn">印刷プレビューを表示</button>
<div class="box-container">
<div class="box">このプロパティの前のコンテンツ</div>
<div class="box" id="example-element">'page-break-before' の付いたコンテンツ</div>
<div class="box">このプロパティの後のコンテンツ</div>
</div>
</div>
.box {
border: solid #5b6dcd 5px;
background-color: #5b6dcd;
margin: 10px 0;
padding: 5px;
}
#example-element {
border: solid 5px #ffc129;
background-color: #ffc129;
color: black;
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
構文
/* キーワード値 */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;
/* グローバル値 */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;
このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。
値
auto-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
always-
この要素の前で必ず改ページが行われるように強制します。
avoid-
この要素の前で改ページされないようにします。
left-
この要素の前で強制的に改ページを行い、次のページが左ページとして配置されるようにします。これは、本の背表紙の左側、または両面印刷の場合にページの裏側に配置されるページのことです。
right-
この要素の前で強制的に改ページを行い、次のページが右ページとして配置されるようにします。これは、本の背表紙の右側、または両面印刷の場合にページの表側に配置されるページのことです。
recto-
左から右に進むページにおいて
rightと同じ動作をします。右から左に進むページであればleftと同じ働きをします。 verso-
左から右に進むページにおいて
leftと同じ動作をします。右から左に進むページであればrightと同じ働きをします。
改ページの別名
page-break-before プロパティは古いプロパティとなり、 break-before によって置き換えられました。
互換性のため、 page-break-before はブラウザーでは break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
| page-break-before | break-before |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に table-row 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
page-break-before =
auto |
always |
avoid |
left |
right |
inherit
例
ある要素の前で改ページを防ぐ
/* div の前で改ページされないようにします */
div.note {
page-break-before: avoid;
}
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |