@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.

* Some parts of this feature may have varying levels of support.

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

構文

css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

記述子

size

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

解説

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

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

メモ: W3C は、ビューポートに関する <length> の単位、vhvwvminvmax の取り扱い方について議論中です。差し当たっては、これらを @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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@page
@bottom-center page-margin box
Experimental
@bottom-left page-margin box
Experimental
@bottom-left-corner page-margin box
Experimental
@bottom-right page-margin box
Experimental
@bottom-right-corner page-margin box
Experimental
@left-bottom page-margin box
Experimental
@left-middle page-margin box
Experimental
@left-top page-margin box
Experimental
page-orientation descriptor
@right-bottom page-margin box
Experimental
@right-middle page-margin box
Experimental
@right-top page-margin box
Experimental
size descriptor
jis-b4 page size
jis-b5 page size
@top-center page-margin box
Experimental
@top-left page-margin box
Experimental
@top-left-corner page-margin box
Experimental
@top-right page-margin box
Experimental
@top-right-corner page-margin box
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報