印刷時にページの背景色が真っ白になる問題の解決策

スポンサーリンク

ブラウザ(chrome)からCtrl+Pでページを印刷しようとした際、

 

 

印刷プレビュー画面を見るとページの背景色が真っ白になっていました。

 

 

f:id:tkhstol-929:20190218233029p:plain

背景色が真っ白!!

ぐぐればすぐ解決するだろうと軽い気持ちで調べ始めましたが、これが意外と曲者でなんやかんやで1時間くらい悩んでしまいました。。。

 

同じ轍を踏まぬよう、いつものように備忘録としてブログに書き殴る。

 

 

解決策①:CSSの@media print を用いて印刷用CSSを指定

CSSでは印刷時のみに適用される「@media print」というものがあります。

書き方は以下の通り。

 

@media print {

    /* ここにCSS記述 */

}

 

外部CSSを読み込む場合はこう↓

<link rel="stylesheet" type="text/css" media="print" href="hoge.css">

普段書いているCSSは「@media screen」と言ってブラウザ表示時に適用されるCSSで、印刷時に適用されるCSSは「@media print」で指定しないといけないらしい。

 

しかし、こちらの策では私は解決できず。。

他の策をぐぐります。。

 

 

解決策②:background-colorを!importantにする

背景色のスタイルである「background-color」を!importantにすれば解決するとの情報がQiitaから得られたので、早速実行。

qiita.com

 

しかし、治らず。

 

どうしろと。

 

泣く泣くググり続けます。

 

ちな、!importantはCSSの優先順位を打ち砕く最強魔法なので、多用は厳禁です。

www.sirloin-nagurigaki.net

 

解決策③:ブラウザの設定を見直す

はい、これでした。

こいつで1発で解決しました。

 

スタイルガー、メディアゾクセイガーと言う前にまずこれを見直せよ、という声が聞こえてきそうですが、

 

Chromeの印刷プレビュー画面から、このような設定項目がありました。

 

f:id:tkhstol-929:20190218234602p:plain

赤く丸しているところの「背景のグラフィック」にチェックが入っていませんでした!

 

 

私の目が節穴なばっかりに、無駄な時間と労力を割いてしまいました。

 

ちなみに

f:id:tkhstol-929:20190218235259p:plain

 

Chrome, Firefox, IEでは背景色が印刷できることを確認できましたが、Microsoft Edgeでは背景色印刷ができないそうです。

 

scrapbox.io

 

まことに恐れ入りますが、Microsoft Edge には Internet Explorer のように背景を印刷する設定箇所がありません。
そのため、背景を印刷される場合は IE をご利用頂くようお願いいたします。
なお、Windows 10 でも変わらず IE をご利用頂けます。タスク バーの検索で「IE」と入力して下さい。

 

 とんでもない公式回答です。

 

「IE使うな!Edge使え!」といいながら「でも印刷するときはIEでしてね^^」というわけわかめな対応です。

にほんブログ村 IT技術ブログへ
にほんブログ村