page-orientation
page-orientationは、@pageルール内で使用し、ページの向きを制御するCSSプロパティです。同じページサイズ指定でも異なる向き（縦向き・横向き）で表示できるようになります。印刷ドキュメントにおいて、特定のページだけ横向きにしたい場合（例：幅広の表やチャート）に特に有用です。
概要
page-orientationは、@pageルール内で使用し、ページの向きを制御するCSSプロパティです。同じページサイズ指定でも異なる向き（縦向き・横向き）で表示できるようになります。印刷ドキュメントにおいて、特定のページだけ横向きにしたい場合（例：幅広の表やチャート）に特に有用です。
対応ブラウザ
デスクトップ
Chrome 85+
Edge 85+
Safari 未対応
Firefox 122+
モバイル
Chrome Android 85+
Safari iOS 未対応
Firefox Android 122+
基本構文
CSS
@page landscape-page {
size: A4;
page-orientation: rotate-right;
}
.wide-table {
page: landscape-page;
}実務での使いどころ
-
特定ページの横向き表示
幅広の表やグラフを含むページだけを横向きに回転させ、印刷レイアウトを最適化します。
注意点
- 現時点ではブラウザサポートが限定的なため、重要な印刷レイアウトではフォールバックを検討してください。
アクセシビリティ
- ページの向きが変わることで読み順序が混乱しないよう、コンテンツの論理的な流れを維持してください。