Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
レイアウト Newly available

Page setup

@pageルールは、印刷やページ分割されたメディアにおけるページのサイズ、マージン、方向などを定義するCSSアットルールです。名前付きページやページ擬似クラスと組み合わせることで、特定のページに異なるスタイルを適用できます。印刷用スタイルシートの作成において中心的な役割を果たす機能です。

印刷ページ設定

概要

@pageルールは、印刷やページ分割されたメディアにおけるページのサイズ、マージン、方向などを定義するCSSアットルールです。名前付きページやページ擬似クラスと組み合わせることで、特定のページに異なるスタイルを適用できます。印刷用スタイルシートの作成において中心的な役割を果たす機能です。

対応ブラウザ

デスクトップ

Chrome 15+
Edge 79+
Safari 18.2+
Firefox 95+

モバイル

Chrome Android 18+
Safari iOS 18.2+
Firefox Android 95+

基本構文

CSS 
@page {
  size: A4;
  margin: 20mm;
}
@page :first {
  margin-top: 40mm;
}

実務での使いどころ

  • 印刷用ページサイズの指定

    A4やレターサイズなど、印刷出力のページサイズとマージンを正確に制御します。

注意点

  • @pageルール内で使用できるプロパティは限定されており、通常のCSSプロパティの多くは使用できません。

アクセシビリティ

  • 印刷スタイルでは十分なマージンを確保し、コンテンツがページ端で切れないよう配慮してください。

参考リンク