【CSS Modules】@pageアットルールの使い方

@pageアットルールの使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月29日

基本的な使い方

@pageインターフェースは、印刷時のページ表示方法を定義するためのインターフェースです。これはCSSのアットルールと呼ばれる特殊な規則の一つで、ウェブページを紙に印刷したりPDFとして出力したりする際の、ページのレイアウトを詳細に制御するために用いられます。通常のCSSがHTML要素の見た目を調整するのに対し、@pageはページ全体のサイズ、余白、特定の領域（例えば、ヘッダーやフッターのスペース）といった、物理的なページそのものの特性を対象とします。

このインターフェースを使うことで、開発者は、印刷時にページの左右の余白を統一したり、A4サイズやレターサイズといった用紙の種類を指定したり、あるいは縦向き（portrait）や横向き（landscape）といった向きを設定したりすることができます。例えば、「@page { margin: 1.5cm; size: A4 portrait; }」と記述することで、すべての印刷ページの余白を1.5cmに設定し、A4縦向きで出力するように指示できます。

@pageは、ブラウザでの表示とは異なる、印刷物特有の要件に対応するために不可欠な機能です。技術文書、レポート、請求書など、印刷品質が重視されるコンテンツを作成するシステムにおいて、開発者は@pageを適切に利用することで、レイアウトの崩れを防ぎ、プロフェッショナルな見た目の印刷物をユーザーに提供できるようになります。

公式リファレンス: @page

構文(syntax)


1@page {
2  margin: 1cm;
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

CSS @pageで印刷サイズと余白を設定する


1@page {
2  /* 印刷ページのサイズをA4に設定します。 */
3  /* 他にも "letter", "legal", "A3", "B5" などがあります。 */
4  /* カスタムサイズを指定する場合は "210mm 297mm" のように記述します。 */
5  size: A4;
6
7  /* ページの周囲の余白をすべて1cmに設定します。 */
8  /* 例: margin: 1cm 2cm 3cm 4cm; (上 右 下 左) */
9  margin: 1cm;
10}

@pageは、ウェブページを印刷する際の用紙設定を定義するためのCSSアットルールです。ウェブコンテンツの表示スタイルは通常のCSSで制御しますが、印刷時には用紙サイズや余白といったページ全体のレイアウトも適切に設定する必要があります。@pageルールは、まさにこのように印刷時の特定のスタイル、特にページの物理的な特性を指定するために使用されます。

サンプルコードでは、まずsizeプロパティによって印刷ページのサイズを「A4」に設定しています。これは、国際的に広く使われているA4用紙サイズを意味します。このプロパティには、「letter」や「legal」といった他の事前定義されたサイズも指定でき、あるいは「210mm 297mm」のように具体的な幅と高さを記述して、カスタムサイズを設定することも可能です。

次にmarginプロパティで、ページの周囲の余白を「1cm」に設定しています。これにより、ページの上下左右すべての余白が1cmになります。個別に余白を設定したい場合は、「margin: 1cm 2cm 3cm 4cm;」のように、上、右、下、左の順で値を指定することで、より詳細なレイアウト調整が行えます。

@pageルール自体は引数を取らず、特定の値を戻すこともありません。このルールは、ブラウザが印刷処理を実行する際に参照する、ページ全体のスタイル定義を記述するための特別なブロックとして機能します。

@pageルールは、ウェブページの画面表示には影響せず、印刷時のみに適用されるページのスタイル（用紙サイズや余白など）を定義するものです。ブラウザ上で確認する際は、必ず「印刷プレビュー」機能を使って、設定したsizeやmarginがどのように適用されるかを確認してください。sizeプロパティでは、A4のような標準キーワードの他に、210mm 297mmのように物理的な単位（mm、cm、inなど）を用いてカスタムサイズを指定できます。marginプロパティの指定方法は、一般的なCSSのmarginプロパティと同様です。ただし、ブラウザやプリンターの環境によって印刷結果に差異が生じる可能性があるため、複数の環境での検証が重要です。

CSSで印刷レイアウトと改ページを制御する


1/*
2 * @page ルールは、印刷時のページレイアウトを定義します。
3 * ここでは、すべてのページに適用される基本的な余白を設定しています。
4 */
5@page {
6  margin: 2cm; /* 印刷時のページの上下左右の余白を2cmに設定 */
7}
8
9/*
10 * .new-page クラスが適用された要素は、その要素の直前で改ページを強制します。
11 * これにより、新しいページからその要素が開始されます。
12 * 例えば、章のタイトルなどで新しいページから始めたい場合に利用します。
13 */
14.new-page {
15  break-before: page;
16}
17
18/*
19 * h1 要素は、その直前で改ページを強制し、新しいページから開始します。
20 * 印刷時に各章のh1見出しを必ず新しいページから始めたい場合に便利です。
21 */
22h1 {
23  break-before: page;
24}

@pageルールは、Webページを印刷する際のレイアウトを定義するために使用されるCSSの特殊な規則です。このルール自体は引数や戻り値を持たず、そのブロック内に記述されたスタイルが印刷時の特定のページに適用されます。サンプルコードでは、@pageブロック内でmargin: 2cm;と設定されており、これにより印刷されるすべてのページの上下左右に2cmの余白が確保されます。

また、印刷時に特定の場所で強制的に改ページを行いたい場合に役立つのがbreak-before: page;プロパティです。このプロパティを要素に適用すると、その要素の直前で必ず改ページが実行され、その要素は新しいページの先頭から表示されるようになります。

サンプルコードでは、.new-pageクラスを持つ要素にbreak-before: page;を設定しているため、このクラスが適用されたコンテンツは必ず新しいページから開始されます。これは、例えば文書の新しい章やセクションを常に新しいページから始めたい場合に非常に便利です。同様に、h1要素にbreak-before: page;を適用することで、すべての章のタイトル（h1見出し）が印刷時に新しいページから始まるように制御でき、印刷された文書の構成がより明確になります。これらの機能は、主に印刷用途において、ページの体裁を整え、読みやすい文書を作成するために活用されます。

提示された@pageルールとbreak-before: pageプロパティは、ウェブページを印刷する際のレイアウトを制御するために使用されます。これらの設定は、通常のブラウザでの表示には影響せず、印刷プレビューや実際に印刷した際にのみ効果を発揮しますので注意が必要です。画面上で期待通りの表示にならない場合でも、必ず印刷プレビューで最終的な結果を確認するようにしてください。特にbreak-before: pageは、指定した要素の直前で改ページを強制するため、意図しない空白ページが発生しないよう、適用する要素や文書構造をよく検討することが重要です。ブラウザやプリンター、OSの環境によって印刷結果に若干の違いが生じる可能性もありますので、本番環境に近い状態で十分なテストを行うことをおすすめします。