@page

@page は CSS のアットルールで、印刷されるページのさまざまな側面を変更するために使用されます。ページの寸法、方向、およびマージンを対象として変更します。@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 のチケット