こうしたお悩みを解決します。

 

今回は、CSSで指定した印刷用スタイルを、プレビュー画面を毎回開かずに確認する方法を紹介します。

そもそも印刷時のCSS指定方法を知りたいという方はこちらの記事を参考に！

 

Web制作では、印刷時にデザインが崩れないよう、印刷用スタイルを指定するケースも少なくありません。

そういった場合、そのデザインを制作しながら確認するには、ブラウザの印刷機能を開きそのプレビュー画面で確認される方もいると思います。

しかし今回紹介する方法でもっと効率よく確認ができるのでぜひ最後までご覧ください。

 

Chromeデベロッパツールを用いた印刷用のCSSスタイル確認方法

今回紹介するのはChromeのデベロッパーツールを用いた方法です。

Web制作をする方はChromeのデベロッパーツールを使って制作する方が多いかと思います。

今回はその機能の一つを使っていきます。

 

①ブラウザ上でデベロッパーツールを開く

まずはChromeでデベロッパーツールを開きます。「F12」、「fn」ボタンを有効にしている方は「fn」「F12」を同時押しすることでデベロッパーツールを開くことができます。

 

②More tools→Renderingを選択

ここからは、普段あまり使わない設定を操作していきます。

まずは右上の「︙（縦三点）」アイコンをクリックします。下の画像の赤い枠内です。

次に「More tools」のところに矢印を持っていくとさらに選択肢が出てくるのでその中から「Rendering」を選択します。

 

③CSS media typeのセレクトボックスで「print」を選択

そうするとデベロッパーツールの下の方に新しいパネルが表示されます。

そこで上の項目で「Rendering」が選択されていることを確認します。

 

そのまま下までスクロールすると「Emulate CSS media type Forces ?」という項目があるのでそこで「print」を選択します。

すると、ブラウザの表示が変化します。これがそのページを印刷したときのスタイルになります。

あとはブラウザの幅を印刷用紙の横幅に合わせることで、実際の印刷に近い見た目で確認できます。

このブログは印刷時はヘッダーが消えるみたいですね。

CSSを変更した場合も、ブラウザをリロードすることで反映を確認できます。

毎回印刷のプレビュー画面を開いて確認する手間が省けますし、デベロッパーツール上で値を調整しながら確認できるため、とても便利です。

 

デベロッパーツールを使って印刷用の見た目を効率良く確認しよう

いかがだったでしょうか。手順を覚えれば、印刷時のデザインを効率よく確認しながら作業できるようになります。

知っているだけで作業の効率が上がるので覚えておいて損はないので、ぜひ試してみてください。

 

印刷時のCSS指定方法はこちらの記事で詳しく説明しているのでぜひ読んでみてください?