CSSの@page疑似クラスを使って両面印刷のレイアウトを設定する方法

書籍や冊子などの両面ドキュメントを印刷する場合、左ページと右ページではページボックス（余白の設定）を変えるのが一般的です。たとえば、製本側（とじしろ）にあたる部分は余白を広めに取り、外側の余白を狭くすることで、見開きでも読みやすいレイアウトになります。

CSSでは、@page ルールに :left および :right の2つの疑似クラスを組み合わせることで、左右それぞれのページに異なるスタイルを適用できます。

記述例

以下のように、@page :left で左ページの余白を、@page :right で右ページの余白を個別に指定します。

<style>
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }
      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

ポイント解説

• @page :left … 左ページ（奇数ページ・偶数ページの扱いはブラウザや印刷設定に依存します）に適用されるスタイルです。この例では製本側の左余白を 4cm に広げています。
• @page :right … 右ページに適用されるスタイルです。こちらも同様に、製本側の右余白を 4cm に設定しています。

このように左右で余白を反転させることで、両面印刷した際にどちらのページでも製本側に十分な余白が確保され、穴あけや製本の際に文字が隠れることを防げます。なお、@page ルールの対応状況はブラウザによって異なるため、実際に印刷する前にプレビューで仕上がりを確認することをおすすめします。