@page

@page 規則は文書を印刷する際の各ページ（ページボックス）の寸法や向き、余白などを指定します。また、@page 規則と組み合わせて使用可能な疑似クラスがいくつか定義されており、「印刷文書の最初のページ」といった形でスタイルを適用することも可能です。

印刷されるページすべての余白を指定した例。

@page {
  margin: 1cm;
}

印刷されるページのうち、最初のページのみに適用される余白を指定した例。

@page :first {
  margin: 2cm;
}

印刷されるページを左右に分けて、それぞれ該当するページに適用される余白を指定した例。

@page :left {
  margin: 2cm 4cm 2cm;
}

@page :right {
  margin: 2cm 2cm 2cm 4cm;
}

size プロパティ

@page 規則内では、size プロパティが使用できます。これは、ページボックスの包含ブロックに対して、その寸法と向きを指定します。

指定可能な値は下記の通りです。

auto

autoを指定すると、ページボックスのサイズと向きはユーザエージェント（ブラウザやプリンタ）によって決定されます。

通常、ページボックスのサイズと向きは印刷対象の用紙に合わせて選択されます。

landscape

landscape （横向き）を指定すると、ページの内容が横向きに印刷されます。このとき、ページボックスの長い方の辺が水平方向になります。

もし <page-size> が指定されていない場合は、用紙のサイズはユーザエージェントによって選択されます。

portrait

portrait （縦向き）を指定すると、ページの内容が縦向きに印刷されます。このとき、ページボックスの短い方の辺が水平方向になります。

もし <page-size> が指定されていない場合は、用紙のサイズはユーザエージェントによって選択されます。

<length [0,∞]>

ページボックスのサイズを、指定された絶対的な寸法で設定します。

1つの長さの値のみ指定した場合、その値がページボックスの幅と高さの両方に適用されるため、正方形になります。

2つの長さの値を指定した場合、最初の値がページボックスの幅、2番目の値が高さを決定します。em や ex などのフォントに依存する単位も使えますが、負の長さは無効です。

例えば下記のように指定します。

@page {
  size: 4in 6in;
}

<page-size>

ページサイズは以下のようなメディア名で指定することができます。これは、長さの値を使ってサイズを指定するのと同等です。

• A5: ISO A5のサイズ、幅148mm、高さ210mm
• A4: ISO A4のサイズ、幅210mm、高さ297mm
• A3: ISO A3のサイズ、幅297mm、高さ420mm
• B5: ISO B5のサイズ、幅176mm、高さ250mm
• B4: ISO B4のサイズ、幅250mm、高さ353mm
• JIS-B5: JIS B5のサイズ、幅182mm、高さ257mm
• JIS-B4: JIS B4のサイズ、幅257mm、高さ364mm
• letter: 北米のレターサイズ、幅8.5インチ、高さ11インチ
• legal: 北米のリーガルサイズ、幅8.5インチ、高さ14インチ
• ledger: 北米のレジャーサイズ、幅11インチ、高さ17インチ

例えば下記のように指定します。

@page {
  size: letter;
}

<page-size> の指定と向きの組み合わせ

<page-size> のメディア名は、landscape や portrait と組み合わせることで、サイズと同時に向きを指定することができます。

例えば、size: A4 landscape; とすると、A4サイズで横向きのページボックスになります。

@page 規則内では、すべてのプロパティが使用できるわけではなく、下記に挙げるプロパティのみが有効になります。

• direction
• 背景関連プロパティ
  
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
• ボーダー関連プロパティ
  
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-width
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-color
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-style
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border
• カウンタ関連プロパティ
  
  • counter-reset
  • counter-increment
• color
• フォント関連プロパティ
  
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font
• height 関連プロパティ
  
  • height
  • min-height
  • max-height
• line-height
• マージン関連プロパティ
  
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin
• outline 関連プロパティ
  
  • outline-width
  • outline-style
  • outline-color
  • outline
• パディング関連プロパティ
  
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
• quotes
• テキスト関連プロパティ
  
  • letter-spacing
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • white-space
  • word-spacing
• visibility
• width 関連プロパティ：
  
  • width
  • min-width
  • max-width

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

@page :left {
  margin: 2cm 4cm 2cm;
}

@page :right {
  margin: 2cm 2cm 2cm 4cm;
}

@page {
  size: A4 landscape;
}

IE11	○size プロパティは未サポート
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○