@page

Baseline 2024

Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

@page は CSS のアットルールで、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

構文

css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

記述子

size

対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。

解説

@page ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

@page アットルールには、 CSS オブジェクトモデルインターフェイスの CSSPageRule からアクセスできます。

メモ: W3C は、ビューポートに関する <length> の単位、vh、vw、vmin、vmax の取り扱い方について議論中です。差し当たっては、これらを @page アットルールの中で使わないでください。

形式文法

@page = 
  @page <page-selector-list>? { <declaration-rule-list> }  

<page-selector-list> = 
  <page-selector>#  

<page-selector> = 
  [ <ident-token>? <pseudo-page>* ]!  

<pseudo-page> = 
  ':' [ left | right | first | blank ]

例

@page 擬似クラスの例

さまざまな @page の擬似クラスのページにある例を参照してください。

仕様書

Specification
CSS Paged Media Module Level 3
# at-page-rule
CSS Logical Properties and Values Level 1
# page

ブラウザーの互換性

BCD tables only load in the browser

関連情報