page-break-before

要素の後に改ページを行うか、否かを指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / O6 / O7 / O9 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ page-break-before : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto ○ 改ページをブラウザー依存で行います。
avoid 改ページを禁止します。
always 改ページを強制的に挿入します。
left/right 見開きに使われるようですが、サポートしているブラウザは少なく、現在はalways指定時と変わらないようです。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        page-break-before : auto;
      }
      #sample2 {
        page-break-before : avoid;
      }
      #sample3 {
        page-break-before : always;
      }
      #sample4 {
        page-break-before : left;
      }
      #sample5 {
        page-break-before : right;
      }
    </style>
  </head>
  <body>
    <p>■印刷プレビューで確認してください。</p>
    <div id="sample1">「page-break-before : auto」サンプル</div>
    <br>
    <div id="sample2">「page-break-before : avoid」サンプル</div>
    <br>
    <div id="sample3">「page-break-before : always」サンプル</div>
    <br>
    <div id="sample4">「page-break-before : left」サンプル</div>
    <br>
    <div id="sample5">「page-break-before : right」サンプル</div>
  </body>
</html>

表示結果

サンプルコードの表示

▲PageTop

関連項目

CSS

page-break-after / page-break-inside

▲PageTop

▲