page-break-before

このプロパティは break-before プロパティによって置き換えられました。

page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。

/* キーワード値 */
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: unset;
初期値auto
適用対象block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません！
  • paged: DB に値が見つかりません！
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

改ページの別名

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
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
always
要素の前で必ず改ページが行われるように強制します。
avoid
要素の前で改ページされないようにします。
left
要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
right
要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
recto
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。
verso
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。

形式文法

auto | always | avoid | left | right | recto | verso

例

/* div の前で改ページされないようにします */
div.note { 
    page-break-before: avoid;
}

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
recto and verso の定義		 編集者草案 recto と verso の追加
CSS Paged Media Module Level 3
page-break-before の定義		 草案 プロパティが適用される要素を table rows と table row groups に拡張
CSS Level 2 (Revision 1)
page-break-before の定義		 勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
page-break-beforeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 The values avoid, left, and right are unsupported.
IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 The values avoid, left, and right are unsupported.
Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

関連トピック