CSSページメディア入門：ページボックスとページ領域の基本を解説

CSSページメディアとは

ページメディア（Paged Media）は、連続メディア（Continuous Media）とは異なり、ドキュメントの内容が1つ以上の独立した「ページ」に分割されるメディアを指します。具体的には、紙への印刷物、OHPフィルム（透明シート）、コンピュータ画面上に表示されるページ形式のコンテンツなどが該当します。

Webブラウザでスクロールしながら閲覧する通常の画面表示（連続メディア）と違い、印刷やPDF出力のような場面では、コンテンツをどのようにページへ割り付けるかが重要になります。CSSでは、このための専用の仕組みが用意されています。

ページボックス（Page Box）の概念

CSS2では「ページボックス」という概念が定義されています。ページボックスとは、有限の寸法を持つボックスであり、その中にコンテンツが描画されます。

ページボックスは矩形（長方形）の領域であり、次の2つのエリアから構成されます。

1. ページ領域（Page Area）

ページ領域は、そのページ上にレイアウトされる各ボックスを含む部分です。ページ領域の端（エッジ）は、ページ区切り（ページブレイク）の間で行われるレイアウトにおける「初期包含ブロック（initial containing block）」として機能します。つまり、ページ内での要素の配置基準となる領域です。

2. マージン領域（Margin Area）

マージン領域は、ページ領域の外側を取り囲む部分です。印刷時の余白に相当し、ページ番号やヘッダー・フッターなどを配置するためのスペースとしても利用できます。

@pageルールとの関係

実務では、@pageルールを使うことで、ページサイズやマージンの設定を行えます。例えば、以下のように記述することでA4サイズの用紙に対応したマージンを指定できます。

@page {
  size: A4;
  margin: 20mm;
}

このように、ページボックスの構造を理解しておくと、印刷向けスタイルシートやPDF生成時のレイアウト制御が格段に行いやすくなります。