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

Page setup

page は CSS のプロパティで、@page アットルールで定義された、名前付きページ、つまり特定の種類のページを指定するために使用します。

名前付きページを連続して使用しているセレクターが複数ある場合は、break-after を使用して強制的にページを分割する必要があるかもしれません。

印刷ページ設定

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
page
85
85
110
1
85
1
その他
css.at-rules.page

@page は CSS のアットルールで、印刷されるページのさまざまな側面を変更するために使用されます。ページの寸法、方向、およびマージンを対象として変更します。@page アットルールは、さまざまな擬似クラスを使用して、印刷物のすべてのページまたはその一部を対象として使用することができます。
2
12
19
18.2
18
18.2
CSS @ ルール
bottom-center
実験的

`@bottom-center` ページマージンボックス
131
131
131
bottom-left
実験的

`@bottom-left` ページマージンボックス
131
131
131
bottom-left-corner
実験的

`@bottom-left-corner` ページマージンボックス
131
131
131
bottom-right
実験的

`@bottom-right` ページマージンボックス
131
131
131
bottom-right-corner
実験的

`@bottom-right-corner` ページマージンボックス
131
131
131
left-bottom
実験的

`@left-bottom` ページマージンボックス
131
131
131
left-middle
実験的

`@left-middle` ページマージンボックス
131
131
131
left-top
実験的

`@left-top` ページマージンボックス
131
131
131
right-bottom
実験的

`@right-bottom` ページマージンボックス
131
131
131
right-middle
実験的

`@right-middle` ページマージンボックス
131
131
131
right-top
実験的

`@right-top` ページマージンボックス
131
131
131
size

size は CSS のアットルール記述子で、@page アットルールで使用され、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。
15
79
95
18.2
18
18.2
size.jis-b4

`jis-b4` ページサイズ
83
83
95
18.2
83
18.2
size.jis-b5

`jis-b5` ページサイズ
83
83
95
18.2
83
18.2
top-center
実験的

`@top-center` ページマージンボックス
131
131
131
top-left
実験的

`@top-left` ページマージンボックス
131
131
131
top-left-corner
実験的

`@top-left-corner` ページマージンボックス
131
131
131
top-right
実験的

`@top-right` ページマージンボックス
131
131
131
top-right-corner
実験的

`@top-right-corner` ページマージンボックス
131
131
131
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

@page(a4settings)

CSS @page(A4settings) demo.

プレビュー全画面表示

@page :first

CSS @page:first demo.

プレビュー全画面表示

@page :left / :right

CSS @page:left /:right demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク