CSS の @page @-規則は、文書を印刷するときに一部の CSS プロパティを変更するために使用します。 @page で変更できる CSS プロパティは限られます。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

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

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

構文

記述子

size
対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
marks
クロップや登録マークを文書に追加します。
bleed
ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。

形式文法

@page <page-selector-list> {
  <page-body>
}

where
<page-selector-list> = [ <page-selector># ]?
<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>

where
<page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*
<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'

where
<pseudo-page> = : [ left | right | first | blank ]
<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom

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

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
:recto and :verso の定義
編集者草案 :recto 及び :verso ページセレクターを追加
CSS Paged Media Module Level 3
@page の定義
草案 CSS Level 2 (Revision 1) から変更はないが、 @page 内でより多くの@規則が利用できるようになった。
CSS Level 2 (Revision 1)
@page の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@pageChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 19IE 完全対応 8Opera 完全対応 6Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 19Opera Android ? Safari iOS ? Samsung Internet Android ?
bleed descriptor
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし
marks descriptor
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし
size descriptor
実験的
Chrome ? Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

最終更新者: mdnwebdocs-bot,