CSSの@pageルールとは？印刷ページのサイズと余白の設定方法

CSSの@pageルールとは

@pageルールを使うと、印刷時に適用される「ページボックス」のサイズ、向き、余白などを指定できます。ページボックスとは、実際の用紙に相当する領域のことで、その寸法はsizeプロパティによって設定します。

また、ページ領域（実際にコンテンツが描画される範囲）の寸法は、ページボックスの寸法からマージン領域を差し引いた大きさになります。つまり、マージンを大きく設定するほど、コンテンツを表示できる領域は狭くなります。

@pageルールの記述例

例えば、次の@pageルールでは、ページボックスのサイズを8.5 × 11インチ（レターサイズ）に設定し、ページボックスの端とページ領域の間に四方2cmのマージンを作成しています。

<style>
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

sizeプロパティで指定できる値

sizeプロパティには、上記のような具体的な寸法（8.5in 11inなど）以外にも、以下のキーワードを指定できます。

• auto：ブラウザやプリンタの設定に従ってページサイズが決まります。
• portrait：縦向き（用紙の高さが幅より長い状態）で出力します。
• landscape：横向き（用紙の幅が高さより長い状態）で出力します。

marginプロパティによる余白の調整

マージンの指定には、cmやinなどの絶対単位のほか、%を使用することもできます。margin: 2cmのように一括指定すれば四辺すべてに同じ余白が適用され、margin-top・margin-bottom・margin-left・margin-rightを使えば、各辺ごとに個別の余白を設定することも可能です。

このように@pageルールを活用することで、Webページを印刷したときのレイアウトを細かく制御でき、より読みやすい印刷物を作成できます。