【CSS Modules】@pageアットルールの使い方
@pageアットルールの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
@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)
戻り値なし
戻り値はありません