【CSS Modules】pageプロパティの使い方
pageプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
pageプロパティは、CSSのページメディアにおける特定のページにスタイルを適用する際に、そのページを識別するための情報を保持するプロパティです。このプロパティは、ウェブページを印刷したり、PDFとして出力したりする際に、印刷される各ページのレイアウトを詳細に制御するために使用されます。CSSの標準機能である@pageアットルールと組み合わせて用いられ、文書内の異なる種類のページ（例えば、最初のページ、左ページ、右ページなど）に個別のスタイルを適用することを可能にします。
具体的な使用例としては、書籍やレポートといった長文のドキュメントを印刷する状況が挙げられます。例えば、本の左ページと右ページでは章番号やページ番号の位置が異なることがありますし、章の開始ページや最初のページには特別な余白やレイアウトを適用したい場合があります。pageプロパティは、HTML要素にpage: <カスタムページ名>;のように指定することで、その要素が開始されるページを特定の「ページタイプ」として識別させます。
その後、CSSファイル内で@page <カスタムページ名> { /* スタイル定義 */ }という形式で、そのカスタムページタイプに適用するマージン、パディング、ヘッダー、フッター、背景などのスタイルを定義します。これにより、文書の構造や内容に応じて、各ページボックスの視覚的な表現を細かく調整し、印刷物としての見栄えを向上させることが可能になります。この機能は、ウェブサイトの表示だけでなく、印刷物として提供されるドキュメントの品質を高める上で非常に重要な役割を果たします。
公式リファレンス: page
構文(syntax)
1selector { 2 page: <name> | auto; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません