印刷用CSSでの横向き印刷が設定できない

Question

前提・実現したいこと

初めて質問させていただきます。よろしくお願い致します。

現在作成しているWebアプリ内で、特定のページ（帳票のようなイメージ）を横向きのレイアウトで印刷できるようにしたい。
※ブラウザはchromeを使用しています

発生している問題

CSSで以下のコードを書いたのですが、うまく反映されません。

チェック用に書いた「.header」クラスのスタイル（background-color: red;)は印刷プレビュー時に反映されたので、「@media print」自体が反映されていないわけではないと思います。

該当のソースコード

  @media print{
    .header{
      background-color: red;
    }
    @page { 
      size: landscape;
    }
  }

補足情報

上記に関連するかと思うのですが、通常chromeでwebページを印刷しようとすると、
以下のようなプレビューが出て、赤枠で囲った「レイアウト」で縦横の選択ができますが、

当方が作成しているWebページで印刷プレビューを出すと、以下の画像のように「レイアウト」の項目が消えてしまいます。（実際に、landscapeで横にならなかったページを表示しています）

ちなみに、以下の画像が、横向きレイアウトで印刷したいWebページです（内容はコメントアウトしておりますが。。）

このあたりも何かCSS等の設定の問題が関連しているのでしょうか？
どなたかご教示いただけますと幸いです。
何卒よろしくお願い致します。

Comments

[x_x]

landscapeで横にならなかったということでしょうか？

[osakana1990]

早速ありがとうございます。はい、landscapeで横にならなかったです。画像がわかりにくいと思うので、質問欄の添付画像を更新いたします。（現状このような形で表示されています）

Answer 1

size: landscape;でできます。

 <style type="text/css" media="print">
    @page {
        size: landscape;
    }
 </style>

Comments

[colling]

あ、やってるのか、、。上記のように外に出してもダメですか？

[osakana1990]

すごい！外に出したらできました！ありがとうございます！
ちなみに、なぜ外に出したら反映されたのかわかりますでしょうか・・・？
（CSSファイルではなく、htmlファイルのheadタグの中に書きました）

[colling]

考えられる要因としては、cssはあとから読み込んだ設定で上書きされますので、自分のcssファイルの後に、ライブラリなどを読み込んでいて、その中に、@media print が書かれていたとかですかねぇ。
それか、単純にタイプミスとか、、、

[osakana1990]

なるほど、勉強になりました。ありがとうございます！

[colling]

何が原因か判明したら、追記しておいてあげると、同じ悩みを持つ人の助けになりますよー（＾＾

[osakana1990]

承知致しました！原因わかったら追記します！