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