質問: ### 前提・実現したいこと 初めて質問させていただきます。よろしくお願い致します。 現在作成しているWebアプリ内で、特定のページ(帳票のようなイメージ)を横向きのレイアウトで印刷できるようにしたい。 ※ブラウザはchromeを使用しています ### 発生している問題 CSSで以下のコードを書いたのですが、うまく反映されません。 チェック用に書いた「.header」クラスのスタイル(background-color: red;)は印刷プレビュー時に反映されたので、「@media print」自体が反映されていないわけではないと思います。 ### 該当のソースコード ``` @media print{ .header{ background-color: red; } @page { size: landscape; } } ``` ### 補足情報 上記に関連するかと思うのですが、通常chromeでwebページを印刷しようとすると、 以下のようなプレビューが出て、赤枠で囲った「レイアウト」で縦横の選択ができますが、 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/5dcfb87f14bb7c6caa7069133661cb50.png) 当方が作成しているWebページで印刷プレビューを出すと、以下の画像のように「レイアウト」の項目が消えてしまいます。(実際に、landscapeで横にならなかったページを表示しています) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/b31a81f43a7144645ff5375780048a41.png) ちなみに、以下の画像が、横向きレイアウトで印刷したいWebページです(内容はコメントアウトしておりますが。。) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/5682f2a9f7c8046fef19df1161301579.png) このあたりも何かCSS等の設定の問題が関連しているのでしょうか? どなたかご教示いただけますと幸いです。 何卒よろしくお願い致します。
回答: `size: landscape;`でできます。 ``` ```