【page-break-before】印刷する時の改ページ位置の設定

page-break-beforeプロパティでは、webページを印刷する時の改ページ位置の設定をすることができます。

page-break-beforeプロパティは、指定した要素の直前の改ページについての制御が可能で、改ページを禁止したり、必ず改ページさせたりします。 また改ページの方法にはalways、avoid、left、rightなどが仕様上にはありますが、現在利用できる値は「always」だけのようです。

なおpage-break-beforeは印刷時のみ有効となり、画面表示には影響を与えません。

書式

  • page-break-before : ……… 印刷時の改ページ位置を指定

★:auto、always、left、right、avoid、inherit

auto
指定した位置での改ページ方法について、特に制御をしない
always
指定した位置で必ず(強制的に)改ページするようにする
avoid
指定した位置での改ページを禁止する
left
次のページが左ページになるように強制的に改ページさせる(例えば見開きにしたい場合など)
right
次のページが右ページになるように強制的に改ページさせる(例えば見開きにしたい場合など)

使用した時の例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>改ページサンプル(page-break-before)</title>
<style type="text/css">
h2 {page-break-before: always;}
</style>
</head>
<body>

<h1>印刷時の改ページサンプル</h1>
  <p>この部分が1ページ目<br />※印刷プレビューで改ページ部分を確認することができます</p>
  <hr>

<h2>「h2」中見出し</h2>
  <p>この部分が2ページ目です。<br />
     h2要素に対してpage-break-before:alwaysを指定しているため、h2の直前で必ず改ページされ
     ます。</p>
  <hr>

<h2>「h2」中見出し</h2>
  <h3>「h3」小見出し</h3>
    <p>この部分が3ページ目です。</p>
  <hr>

</body>
</html>

ブラウザ上の表示例

表示例を見る

※上記のページで印刷プレビューを見ると、改ページ位置の適用結果が確認できます

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 ブロックレベル要素
メディア paged / page
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1.2~

関連情報