@page

構文

/* すべてのページを対象とする */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* すべての偶数ページを対象とする */
@page :left {
  margin-top: 4in;
}

/* すべての奇数ページを対象とする */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* `page: wide;` が設定されているすべてのセレクターを対象とする */
@page wide {
  size: a4 landscape;
}

@page {
  /* ページ番号を示す右上マージンボックス */
  @top-right {
    content: "ページ " counter(pageNumber);
  }
}

ページプロパティ

@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 <page-selector-list>? { <declaration-rule-list> }  

<page-selector-list> = 
  <page-selector>#  

<page-selector> = 
  [ <ident-token>? <pseudo-page>* ]!  

<pseudo-page> = 
  : [ left | right | first | blank ]  

ここで、 <page-body> は次のようになります。

• page-properties
• page-margin properties

また、 <pseudo-page> は下記の擬似クラスを表します。

• :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 の例にあります。

例

size プロパティを使用してページの方向を変更する

この例では、<section> を landscape 形式で個々のページに分割し、各ページに 20% のマージンを指定して印刷する方法を示します。 印刷ボタンをクリックすると、HTML の各セクションが個々のページに分割された印刷ダイアログが表示されます。

<button>ページを印刷</button>
<article>
  <section>
    <h2>見出し 1</h2>
    <p>段落 1 です。</p>
  </section>
  <section>
    <h2>見出し 2</h2>
    <p>段落 2 です。</p>
  </section>
  <section>
    <h2>見出し 3</h2>
    <p>段落 3 です。</p>
  </section>
</article>

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 の擬似クラスの例

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

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

仕様書

ブラウザーの互換性

関連情報

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