HTML で印刷中の改ページ

印刷時に指定した位置で新しいページを始めるには、その位置の前後にある要素へCSSの改ページルールを適用し、ブラウザーの印刷プレビューで確認します。要素の後で改ページするには page-break-after: always、前で改ページするには page-break-before: always を使います。代わりに break-after: page も使えます。ページの区切り方はブラウザー、用紙サイズ、印刷設定によって変わるため、実際のプレビューを確認してください。

Print ボタンから window.print() を呼び出すと、ブラウザーの印刷画面を開けます。以下の例は調整して使えるページのソースです。自分のページと設定でどう印刷されるか、印刷プレビューで確認してください。

次のJavaScriptは、スタイルシートにコピーできるCSSルールを出力します。最初のページ例と同じセレクターと宣言を使っています。

const rule = "@media print {\n  .break-page {\n    page-break-after: always;\n  }\n}";
console.log(rule);

@media print {
  .break-page {
    page-break-after: always;
  }
}

page-break-after: always で印刷時に改ページする

@media print を使うと、ページ区切りのスタイルを印刷時だけ適用できます。ページの終わりにしたいコンテンツに break-page クラスを指定します。page-break-after: always を宣言すると、その要素の後に改ページが入り、次の見出しが印刷時の新しいページから始まります。

このページ全体の例には、2つの見出しと印刷ボタンがあります。HTMLファイルとして保存するか、ブラウザー上のエディターに貼り付けてから、印刷プレビューを開いてください。最初の見出しにクラスが付いているため、その後、つまり2つ目の見出しの前で改ページされます。用紙サイズや印刷設定によってページ分けが変わるので、内容を調整しながらプレビューを確認してください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after an element</title>
  <style>
    @media print {
      .break-page {
        page-break-after: always;
      }
    }
  </style>
</head>
<body>
  <h1 class="break-page">Before page break</h1>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

デモ

page-break-before: always で印刷時に改ページする

2つ目の方法でも印刷時だけ適用するラッパーを使いますが、新しいページを始めたいコンテンツに break-page を指定します。page-break-before: always を宣言すると、その要素の前に改ページが入ります。この例では、最初の見出しは改ページの前に残り、2つ目の見出しが印刷時の次のページから始まります。新しいページの先頭にしたい要素へルールを付けるのが分かりやすい場合は、この方法を選んでください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break before an element</title>
  <style>
    @media print {
      .break-page {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <h1 class="break-page">After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

break-after: page で印刷時に改ページする

break-after: page を宣言すると、ルールを指定した要素の後に改ページを入れられます。この例では、2つの見出しの間にある div に適用しているため、区切りの後に続く2つ目の見出しは印刷時の次のページから始まります。最初の方法と異なり、この例のCSSルールは @media print で囲んでいません。印刷時だけスタイルを適用したい場合は、そのラッパーを追加してください。対になったボタンのマークアップは window.print() を呼び出し、ブラウザーの印刷画面を開きます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after a divider</title>
  <style>
    .break-page {
      break-after: page;
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <div class="break-page"></div>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

CSSルールで指定できるのは改ページを入れる位置であり、すべてのブラウザーや印刷設定で同じページ分けになるとは限りません。ルールを適用したらブラウザーの印刷プレビューを開き、意図した位置からコンテンツが始まるか確認してください。ページの開始が早すぎたり遅すぎたりする場合は、改ページの後または前に置きたい要素へクラスを移し、もう一度プレビューで確認します。