Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
セレクター Limited support

Page selectors

ページセレクターは、@pageルール内で使用する擬似クラスで、印刷文書のページを位置に基づいて選択します。:firstは最初のページ、:leftと:rightは見開きの左右のページをそれぞれ対象とします。書籍や雑誌のような印刷レイアウトで、ページごとに異なるマージンやヘッダーを設定する際に活用されます。

印刷ページ擬似クラス

概要

ページセレクターは、@pageルール内で使用する擬似クラスで、印刷文書のページを位置に基づいて選択します。:firstは最初のページ、:leftと:rightは見開きの左右のページをそれぞれ対象とします。書籍や雑誌のような印刷レイアウトで、ページごとに異なるマージンやヘッダーを設定する際に活用されます。

対応ブラウザ

デスクトップ

Chrome 18+
Edge 12+
Safari 6+
Firefox 未対応

モバイル

Chrome Android 18+
Safari iOS 6+
Firefox Android 未対応

基本構文

CSS 
@page :first {
  margin-top: 50mm;
}
@page :left {
  margin-left: 30mm;
}
@page :right {
  margin-right: 30mm;
}

実務での使いどころ

  • 見開き印刷のマージン設定

    書籍スタイルの印刷物で、綴じ側のマージンを広くし、左右ページで対称的なレイアウトを実現します。

注意点

  • Firefoxでは:leftと:rightのサポートが不完全なため、クロスブラウザ対応が必要な場合は注意してください。

アクセシビリティ

  • ページセレクターによるスタイル変更は印刷メディアのみに影響し、スクリーンリーダーには影響しません。

参考リンク