| ルール名 | @page |
|---|---|
| 構文 |
@page {...}
@page :selector {...}
|
| サポート | https://caniuse.com/?search=%40page |
印刷に関わるスタイルを指定します。ページスタイルでは、margin, margin-top, margin-bottom, margin-left, margin-right, size, marks を指定できます。page-break-before, page-break-after, page-break-inside, page, orphans, widows も参照してください。
@page { margin-top: 2cm; margin-bottom: 2cm; }
下記の様に条件を指定することもできます。:first は最初のページ、:right は右ページ、:left は左ページ、:blank は白紙ページを意味します。
@page :first { margin-right: 4cm; }
@page :right { margin-right: 4cm; }
@page :left { margin-left: 4cm; }
@page :blank { margin-left: 4cm; }
@bottom-right { ... } などにより、印刷時の右下などのマージンに何を表示するかを指定することができます。下記の例では右ページの左下に "My book" を、右下にページ番号を、左ページの右下に "My book" を、左下にページ番号を印刷します。Chrome 113 でサポートされました。他のブラウザのサポート状況は Can I use... を参照してください。
@page:right {
@bottom-left { content: "My book"; }
@bottom-right { content: counter(page); }
}
@page:left {
@bottom-right { content: "My book"; }
@bottom-left { content: counter(page); }
}
下記の16個の領域が定義されています。