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

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

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

なおpage-break-afterは印刷時のみ有効となり、画面表示には影響を与えません。 その要素の直前での改ページ方法を指定したい場合は、page-break-beforeを使用します。

書式

  • page-break-after : ……… その要素の直後の改ページ方法を設定

★: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>
<meta charset="utf-8">
<title>改ページサンプル(page-break-after)</title>
<style type="text/css">
h2 {page-break-after: always;}
</style>
</head>
<body>
 
<h1>印刷時の改ページサンプル(page-break-after)</h1>
  <p>この部分が1ページ目<br />※印刷プレビューで改ページ部分を確認することができます</p>
 
<h2>「h2」中見出し</h2>
  <hr>
  <p>この部分が2ページ目です。<br />
     h2要素に対してpage-break-after:alwaysを指定しているため、h2の直後で必ず改ページされ
     ます。</p>
 
<h2>「h2」中見出し</h2>
  <hr>
  <h3>「h3」小見出し</h3>
    <p>この部分が3ページ目です。</p>
  <hr>
 
</body>
</html>

ブラウザ上の表示例

表示例を見る

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

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

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

関連情報