Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】page-orientationアットルール記述子の使い方

page-orientationアットルール記述子の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

page-orientationプロパティは、CSSの@pageアットルール内で使用され、文書を印刷する際のページの向きに関する情報を保持するプロパティです。このプロパティを使用することで、Webコンテンツがプリンターで出力される際に、ページを縦長にするか横長にするかを細かく指定できます。

具体的には、page-orientationプロパティには主に「portrait」(ポートレート、縦向き)と「landscape」(ランドスケープ、横向き)という二つの値があります。例えば、レポートや書籍のようにテキストが中心の文書ではportraitを選択し、グラフや広範囲の図表を含む文書ではlandscapeを選択するといった使い分けが可能です。これにより、印刷される情報の視認性やレイアウトの適切性を高めることができます。

この設定は、Webブラウザの印刷機能や、ページをPDFに変換する際など、コンテンツが紙媒体やそれに準ずる形式で出力される場合に適用されます。システムエンジニアを目指す方にとっては、Webアプリケーションでユーザーが印刷する機能を提供する際や、特定のフォーマットで出力する必要がある文書を扱う際に、非常に重要な役割を果たす要素となります。ページの見た目を紙の上でどのように表現するかを制御するための基本的ながら強力なツールの一つです。

公式リファレンス: page-orientation

構文(syntax)

1@page {
2  page-orientation: up;
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません