CSS - @page

概要

ルール名 @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 も参照してください。

CSS
@page { margin-top: 2cm; margin-bottom: 2cm; }

下記の様に条件を指定することもできます。:first は最初のページ、:right は右ページ、:left は左ページ、:blank は白紙ページを意味します。

CSS
@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... を参照してください。

CSS
@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個の領域が定義されています。

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@left-top
@right-top
@left-middle
@right-middle
@left-bottom
@right-bottom
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner

リンク

Copyright (C) 1997-2024 杜甫々
初版：1997年7月27日、最終更新：2024年12月8日
https://www.tohoho-web.com/css/rule/page.htm