【HTML5/CSS】Webサイトで背景色が印刷できない場合にCSSで行うこと、及びブラウザの設定

Webサイトを印刷すると、背景色が印刷できない現象があり、調べて対応策をまとめてみました。

１、現象
例として、Yhoo!Japanを印刷使用とすると、次のように背景色が印刷できません。

対策方法を実施することで次のように背景色も印刷することができるようになります。

２、対応策
(1) CSSでの対応方法
 プログラムで対応するには、Canvasで書けばできるという話もありますが、手間がかかります。
Chromeの場合は、CSSに下記のように記述することで、背景色も印刷することができます。

body {

    -webkit-print-color-adjust: exact;

}

(2) ブラウザの設定方法
 Webサイトは、デフォルトは、印刷に不要な部分を印刷しない設定になっています。
おそらく、無駄にカラー印刷を省くためのような気がします。
そこで、各ブラウザで次の設定をすると、背景印刷ができます。

背景色まで含めて印刷したいのにプレビューで表示されない場合は下記の内容を確認して下さい。

・Chromeの場合
①「GoogleChromeの設定」から「印刷」をクリック
②「詳細設定」をクリック
③「背景のグラフィック」 のチェックボックスをオン

・firefoxの場合
①[ファイル]メニューの[ページ設定]をクリック
②[書式とオプション]の[背景色と背景画像も印刷]のチェックボックスをオン

・IEの場合
①[ファイル]メニューの[ページ設定]をクリック
②ページ設定ダイアログで　[背景の色とイメージを印刷する]のチェックボックスをオン

・Edgeの場合
残念ながら、Edgeには設定はないそうです。
IEで印刷してくださいと、下記URLでMicrosoftサポートが回答してありました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10150795920




【参考URL】
http://hacknote.jp/archives/11460/
 http://lifeon.lion.co.jp/print.htm

http://zentoo.hatenablog.com/entry/2014/02/11/161456