概要

@pageルールは、CSSで印刷メディア向けのページレイアウトをカスタマイズするための特別なルールです。このルールを使うことで、印刷時のページサイズ、マージン、ページの向き（縦・横）などを細かく設定できます。印刷ドキュメントを扱うウェブサイトや、PDFの生成など、印刷の見た目を最適化する際に非常に有効です。

構文

@page {
  size: <size>;
  margin: <length>;
}

また、ページの特定のセクション（例：表紙、偶数ページ、奇数ページなど）をカスタマイズするために、以下のように指定できます。

@page :first {
  margin: 20mm;
}
@page :left {
  margin-left: 30mm;
}
@page :right {
  margin-right: 30mm;
}

パラメータ

  • size
    ページのサイズを指定します。標準的なサイズ指定（A4、Letterなど）やカスタムの幅と高さを指定することができます（例：size: A4; や size: 210mm 297mm;）。
  • margin
    ページの上下左右のマージンを指定します。単位はpx、cm、mmなどが使用可能です（例：margin: 10mm;）。
  • @page :first
    ドキュメントの最初のページのスタイルを設定します。
  • @page :left
    偶数ページのスタイルを指定します。見開き印刷などで左側のページのレイアウトを調整するのに便利です。
  • @page :right
    奇数ページのスタイルを指定します。見開き印刷の右側ページを調整する際に使用します。

戻り値

@pageは指定された値に基づき、印刷時のページ全体のスタイルを適用します。これにより、印刷結果のレイアウトが最適化され、ページごとに異なるスタイルを設定することができます。

説明

@pageルールは、通常のウェブページスタイルとは異なり、印刷メディアに特化した設定を行います。通常のCSSプロパティで指定できないページ全体のスタイルを制御し、印刷時の視覚的な品質を向上させます。

主な特徴

  • ページサイズのカスタマイズ: 用紙サイズを指定して、A4やLetterなどの標準サイズから、任意のカスタムサイズまで設定可能です。
  • ページマージンの調整: 印刷用のページマージンを調整して、余白のバランスをコントロールできます。
  • ページセクションのカスタマイズ: 最初のページや偶数・奇数ページに異なるスタイルを設定して、見開き印刷に対応したレイアウトが可能です。

使用例

基本的な使用例 - ページサイズとマージンを設定する

以下の例では、@pageを使って印刷時のページサイズをA4に設定し、マージンを10mmに指定しています。

@page {
  size: A4; /* ページサイズをA4に設定 */
  margin: 10mm; /* ページのマージンを10mmに設定 */
}

この設定により、ページ全体がA4サイズとなり、余白が10mmずつ適用されます。

見開き印刷のための偶数ページと奇数ページの設定

偶数ページと奇数ページで異なるマージンを設定することで、見開き印刷のレイアウトを調整します。

@page :left {
  margin-left: 20mm; /* 偶数ページの左側マージンを大きく設定 */
  margin-right: 10mm;
}
@page :right {
  margin-left: 10mm;
  margin-right: 20mm; /* 奇数ページの右側マージンを大きく設定 */
}

この設定により、見開き印刷時にページの中央に余白が大きくなるように調整できます。

カスタムサイズでの印刷設定

特定のサイズで印刷する場合、サイズをミリメートル単位で直接指定できます。

@page {
  size: 150mm 200mm; /* カスタムサイズのページを指定 */
  margin: 15mm;
}

この設定では、150mm x 200mmのカスタムページサイズが適用されます。

注意点

  • @pageルールは印刷メディアでのみ適用され、スクリーン表示には影響を与えません。プレビュー時や印刷設定にてその効果が確認できます。
  • 一部のブラウザや印刷設定により、意図したレイアウトが反映されないことがあるため、各ブラウザの対応状況や設定を確認してください。
  • カスタムのページサイズやマージンを指定する際には、プリンタの設定や用紙サイズにも配慮する必要があります。

まとめ

@pageルールは、印刷時のページレイアウトを細かくカスタマイズするためのCSS機能です。サイズやマージンの調整、特定のページに異なるスタイルを設定することで、印刷物の見栄えを最適化できます。特に印刷ドキュメントのデザインが重要な場合、このプロパティを活用することで、プロフェッショナルな印刷物を作成できるでしょう。

参照:

@page - MDN Web Docs