たまにあるのですが、このページ印刷にも対応してくださーい。

コーダーの方はご存知の方も多いのですが、印刷に対応するの難しくはないのですが面倒臭さがあるのです！
（何も知らないディレクターが軽々とOKしてくて30ページ近くあるような中規模以上のサイトの時の絶望感といったら。。。）

このルールさえ知っていれば対応はある程度楽になると思うのでご紹介。

Chromeにはこれ

cssの頭の行などに

body {
	-webkit-print-color-adjust: exact;
}

を記述してあげてください！
注意点としては記述するCSSを読み込んでいるlinkのmedia属性が「all」または「print」になっていることを確認してください！
（デフォルトのメディア属性はallです）

 

FireFoxには

firefoxでは背景画像は出るのに背景色が出ない！
って問題に当たると思います。

その場合は、背景色を指定している箇所で「!important」を追加してみてください。
それだけで表示されるはずです。

ただし、上書きの重ね合いになることもあるのでHTMLやCSSの記述する順番には気をつけましょう！

 

以上。