【css】webサイトページのプリント用のデザインを作りやすくする方法

webページのプリント用のデザインを頼まれたので久しぶりに作業してみた

久しぶり過ぎて、なにもわかんらん状態　苦笑

調べながらやってみた結果のポイントだけ整理してメモる

プリント用のcssは「mediaクエリ」を使う

cssはこれ
↓

@media print {

〜ここに、プリント用の設定をしていく〜

}

ほとんどの場合は、プリント時に必要のない要素を display:block で消していく感じ

こんな感じ的のサンプルコード
↓

@media print {

     body {
         margin: 0;
         padding: 0;
     }
 
     .wrap {
         margin: 0;
         padding: 0;
     }
 
     .title, hoge, foo, bar {
         display: none;
     }

}

まあ、作業自体はこれだけなのだが

印刷するレイアウトの確認方法がとてもめんどくさいことに気がついた

いちいち

cssを編集して ⇒ 印刷ボタンでプレビュー画面で確認して ⇒ cssを編集して ⇒ 印刷ボタンでプレビュー画面で確認して…

とかやっていたら日が暮れてしまう。。。

そんな時は Google Chrome のデベロッパーツールを使えば時間が短縮できる！

Google Chrome のデベロッパーツールで印刷用プレビューを確認

まず、該当のwebページをGoogle Chromeで表示して

[表示] > [デベロッパー] > [デベロッパー ツール] の順に選択

【Windows】のショートカット
Alt + command + I で デベロッパーツールを開く

【Mac】のショートカット
Command + Shift + C で デベロッパーツールを開く

下記画像の
① 縦3点をクリック

② More tools がでてるので、カーソルを合わせて

③ Rendering をクリック

下記画像の
④ Renderingバーに切り替えて、下へスクロールする

⑤ Emulate CSS media type 箇所の print をクリックする

この瞬間に、画面がプリント用のスタイルに切り替わる

この状態で、プリント用のスタイルを編集するととてーもはかどります！

ちなみに

当サイトの印刷用ページのcssはプリント用に対応していませんでしたー