PCブラウザからページ印刷をするときのデバッグ方法などメモ

ページのコーディングの際に印刷に対応したいことがありまして、あまりやらないことなのでデバッグ方法を忘れそうなのでメモしておきます。

print用cssをheadに追加

今回は一部のページのみ印刷時に表示を変えたかったので、印刷用のcssを用意しました。

<link rel="stylesheet" href="print.css" media="print">

各種ブラウザのデバッグ方法

Chrome

デベロッパーツールの右上の縦3点リーダ > More Tools > Rendering「Emulate CSS media type」のセレクトボックスを「No Emulation」から「Print」に変更。

FireFox

アドオン「Web Developer」からCSS > Display Print Stylesをチェック。

Edge

デベロッパーツールの横3点リーダ > その他のツール > レンダリング「CSSメディアの種類をエミュレートする」のセレクトボックスを「エミュレーションなし」から「印刷」に変更。

(Chromeを日本語にしただけで全く同じという…)

IE11について

印刷プレビューができないので、背景色を表示させることができないので省きます。
(背景色を表示させる方法があるかもですが、サポートも来年までですし)

出会ったバグ・表示設定について

imgタグの画像が表示されない

imgタグにdisplay:block;(もしくはinline-block)をかけると画像が表示されました。
(自分が触っているサイト固有の問題のような気もしますがどうなんだろう)

「印刷プレビュー」したら背景色が表示されない

[ctrl + P]で印刷プレビューした際、背景色が表示されてない場合は、Chrome・FireFox・Edgeであれば印刷プレビューのオプションで背景を表示させるかどうかのチェックボックスがあったので、それをチェックすれば表示されました。

タイトルとURLをコピーしました