・自分で作ったページ印刷したら背景色が反映されないところがある
・背景画像も表示されていない！
こういった悩みを解決します！
Web制作をしている方ならコーディングをして印刷時にも綺麗に表示をするように依頼されることもあるかと思います。
その中で背景色、背景画像をCSSで指定していていざ印刷してみるとそれが反映されてない！となることがあります。
自分も初めて印刷対応をした時にこの状態にはまってしまいかなり焦ってしまったのでなぜこのような現象になってしまうのか、そしてその解決策まで一気に解説していきます！
印刷時に背景色、背景画像が反映されない原因と解決策
CSSで指定した背景色、背景画像が反映されない原因はあるCSSプロパティにあります。
それが「-webkit-print-color-adjust」。
このプロパティは印刷時の背景色や背景画像を表示させるかどうかを制御するものです。
このプロパティに対して使えるキーワード値は2つでそれが以下になります。
- economy：背景色や背景画像は、ブラウザーの印刷設定ダイアログで、ユーザーが明示的に許可した場合のみ適用される。（デフォルト設定はこれ）
- exact：用された要素の背景色や背景画像は常に印刷される。ユーザーの印刷設定は上書きされます。
つまり、デフォルトではユーザー側が印刷時の設定で背景色や背景画像を表示させるようにしないと適用されないようになっているということです。
なのでbodyに対してこのようなCSSを指定してあげます。
body {
-webkit-print-color-adjust: exact;
}注意点としてはこのCSSファイルを読み込むときに印刷時に適用されるように「media=”all”」または「media=”print”」となっていることを確認してください。
印刷時のCSS設定についてはこちらの記事に詳しく書いてあるので参考にしてみてください！
印刷対応はイレギュラーなことが起こりがち
いかがだったでしょうか。
知らないと印刷時に背景色が反映されなくて焦ってしまいますが知識として知っておくと落ち着いて対応できると思います。
他にもイレギュラーなことが起こりがちですが、何が問題でイレギュラーなことが起きているかを追求できれば案外簡単に対処できるのでぜひこういった記事を参考にしてみてください〜
エンジニアにおすすめ書籍
エンジニアになりたて、これから勉強を深めていきたいという方におすすめの書籍はこちら！
