このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
page-break-after
警告:このプロパティはbreak-after プロパティで置き換えられました。
page-break-after は CSS のプロパティで、現在の要素の後で改ページが行われるように調整します。
css
/* キーワード値 */page-break-after: auto;page-break-after: always;page-break-after: avoid;page-break-after: left;page-break-after: right;page-break-after: recto;page-break-after: verso;/* グローバル値 */page-break-after: inherit;page-break-after: initial;page-break-after: revert;page-break-after: unset;試してみましょう
page-break-after: auto;page-break-after: always;<section> <div> <p> The effect of this property can be noticed when the document is being printed or a preview of a print is displayed. </p> <button>Show Print Preview</button> <div> <div>Content before the property</div> <div> Content with 'page-break-after' </div> <div>Content after the property</div> </div> </div></section>.box { border: solid #5b6dcd 5px; background-color: #5b6dcd; margin: 10px 0; padding: 5px;}#example-element { border: solid 5px #ffc129; background-color: #ffc129; color: black;}.hide-element { display: none;}const btn = document.getElementById("print-btn");const editorContainer = document.getElementsByClassName( "css-editor-container",)[0];const exampleHTMLElement = document.getElementById("default-example");const printableSection = document.createElement("div");printableSection.setAttribute("id", "printable-section");printableSection.classList.add("hide-element");document.body.appendChild(printableSection);btn.addEventListener("click", () => { const exampleContent = exampleHTMLElement.innerHTML; editorContainer.classList.add("hide-element"); printableSection.innerHTML = exampleContent; printableSection.classList.remove("hide-element"); window.print(); printableSection.classList.add("hide-element"); printableSection.innerHTML = ""; editorContainer.classList.remove("hide-element");});このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の<div> には適用されません。
構文
値
auto初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
always要素の後で必ず改ページが行われるように強制します。
avoid要素の後で改ページされないようにします。
left要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。
right要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。
rectoExperimental左から右に進むページにおいて
rightと同じ動作をします。右から左に進むページであればleftと同じ働きをします。versoExperimental左から右に進むページにおいて
leftと同じ動作をします。右から左に進むページであればrightと同じ働きをします。
改ページの別名
page-break-after プロパティは古いプロパティとなり、break-after で置き換えられました。
互換性のため、page-break-after はブラウザーではbreak-after の別名として扱われます。これにより、page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
| page-break-after | break-after |
|---|---|
auto | auto |
left | left |
right | right |
avoid | avoid |
always | page |
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素にtable-row 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
page-break-after =
auto|
always|
avoid|
left|
right|
inherit
例
脚注の後にページ区切りを設定
css
/* 脚注の後で新しいページに移ります */div.footnotes { page-break-after: always;}仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |