@media printと@pageの違いと使い分け

Safari 18.2がサポートしたことで、全主要ブラウザで@pageが使えるようになった。

@pageを使うことで、印刷されたページのサイズや向き、余白などを変更できるようになった。

@media printと@pageの違い

印刷用スタイルといえば@media printが定番だが、@pageとはまったく異なる。

@media printは印刷用に変更するスタイル（サイドバーを消す、色をモノクロにするなど）を設定するためのもので、@page`は印刷時のページサイズ（A4、B5など）や向き（縦、横向き）、さらに左上にページ番号を振る、というような印刷オプションを設定するためのものだ。

@media printの例

@media print {
  /* ページをモノクロにする */
  html {
    filter: grayscale(100%);
  }
  /* メインコンテンツ以外は非表示にする */
  header, footer, aside {
    display: none;
  }
}

@pageの例

@page {
  size: a4 landscape;
  margin: 1in;
}

@page :left {
  margin-top: 1in;
}

@page :right {
  margin-top: 1in;
}

body {
  counter-reset: pageNumber;
}
@page {
  counter-increment: pageNumber;
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

デモ