@page

@page アットルールには、ページ記述子とマージンのアットルールのみを含めることができます。次の記述子は、少なくとも 1 つのブラウザーで実装されています。

margin

ページのマージンを指定します。個々のマージンプロパティ margin-top、margin-right、margin-bottom、margin-left も使用できます。

page-orientation

ページの方向を指定します。これはページのレイアウトには影響しません。回転は、出力媒体でのレイアウト後に適用されます。

size

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

仕様では、@page アットルールによってページボックスに適用できる CSS プロパティとして、以下のプロパティが挙げられています。しかし、これらはどのユーザーエージェントもまだ対応していません。

@page ルールは、ページボックスのプロパティを定義します。 @page アットルールは、CSS オブジェクトモデルインターフェイス CSSPageRule 経由でアクセスできます。

@page アットルールを使用すると、ユーザーはルールに名前を割り当てることができます。この名前は、 page プロパティを使用して宣言で呼び出されます。

page

セレクターがユーザー定義の名前付きページを使用できるようにします。

@page = 
  @page ? {  }  

 = 
  #  

 = 
  [ ? * ]!  

 = 
  : [ left | right | first | blank ]  

ここで、 は次のようになります。

• page-properties
• page-margin properties

また、 は下記の擬似クラスを表します。

• :blank
• :first
• :left
• :right

マージンのアットルールは、@page アットルール内で使用されます。これらはそれぞれ、文書内のさまざまな章を対象とし、スタイルブロックで設定されたプロパティ値に基づいて、出力されるページの領域をスタイル設定します。

@page {
  @top-left {
    /* ページマージンプロパティ */
  }
}

@top-left は、文書の左上を対象とし、設定されたページマージンプロパティに基づいて変更を適用します。

それ以外にも、マージンに関するアットルールには次のようなものがあります。

@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

ページマージンプロパティは、個々のマージンアットルールで設定できる一連の CSS プロパティです。これらには、次のものが含まれます。

名前付きページを使用すると、印刷時に宣言的な方法でページごとのレイアウトや改ページを追加することができます。

名前付きページは、 page プロパティを使用して適用することができます。これにより、ユーザーは印刷レイアウトで使用するさまざまなページ構成を作成することができます。

この例については、 page の例にあります。

この例では、

ページを印刷

  

    
ヘッダー 1
    
段落 1 です。
  
  

    
ヘッダー 2
    
段落 2 です。
  
  

    
ヘッダー 3
    
段落 3 です。
  

const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

@page {
  size: landscape;
  margin: 2cm;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1rem;
  border: 1px dashed;
}

様々な @page の擬似クラスの例を参照してください。

• :blank
• :first
• :left
• :right

• page プロパティ
• @page size 記述子
• CSS ページメディアモジュール
• Paged.js: W3C paged media polyfill (pagedjs.org)
• [META] CSS Paged Media Module Level 3 この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット