CSSのsizeプロパティで印刷ページのサイズを設定する方法｜auto・landscape・portrait・lengthの違いを解説

CSSでページサイズを設定できる4つの値

CSSでは@pageルールを使うことで、印刷時のページボックス（出力用紙）のサイズや向きを制御できます。sizeプロパティに指定できる値は、主に以下の4種類です。

• auto － ページボックスは、出力先の用紙（ターゲットシート）のサイズと向きに自動的に合わせられます。これが初期値です。
• landscape － 出力先の向きを上書きします。ページボックスはターゲットと同じサイズのまま、長い辺が水平方向になる横長レイアウトになります。
• portrait － 出力先の向きを上書きします。ページボックスはターゲットと同じサイズのまま、短い辺が水平方向になる縦長レイアウトになります。
• length（長さの値） － sizeプロパティに長さの値を指定すると、絶対的なサイズのページボックスが作成されます。値を1つだけ指定した場合は、幅と高さの両方に同じ値が適用されます。なお、sizeプロパティにはパーセンテージ（%）の値は使用できない点に注意してください。

マージンとの組み合わせ例

次の例では、ページボックスの外側の端が出力先の用紙に揃えられます。marginプロパティのパーセンテージ値は用紙サイズに対する相対値として解釈されるため、たとえばA4判（21.0cm × 29.7cm）の用紙に出力する場合、マージンはそれぞれ2.10cmと2.97cmとして計算されます。

<style type="text/css">
<!--
   @page {
      size: auto; /* autoは初期値 */
      margin: 10%;
   }
-->
</style>

補足：ブラウザ対応について

@pageルールやsizeプロパティは印刷用スタイルシートを定義するうえで非常に便利ですが、ブラウザによって対応状況が異なる点には注意が必要です。特にsizeプロパティは長らく一部のブラウザでしかサポートされていませんでしたが、近年は対応範囲が広がりつつあります。実装時は、実際に印刷プレビューでレイアウトを確認しながら調整することをおすすめします。