BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
会議や打ち合わせ資料としてWebサイトをそのまま印刷する場面って結構ありますよね。
Web制作者として気をつけていることが「印刷画面の崩れがないか」ということです。
その際にプリント用のCSSを設定するのですが、意外と知られていないので今回は「印刷用にCSSを設定する方法」をご紹介いたします。

印刷時だけに適用されるCSS設定方法

全部で4つの方法があります。

①印刷用の外部CSSを作ってlink media=”print”で読み込む方法

headタグに入れましょう。

②印刷用の外部CSSを作って@import printで読み込む方法

既存のCSSファイル内に記述、またはHTMLのheadセクションstyle内に記述しましょう。

③HTML上のStyle要素にmedia属性でprintを指定する方法

headタグに入れましょう。

④メディアクエリで@media print指定する方法

レスポンシブと同様にメディアクエリを使い、既存のCSS内に記述しましょう。

印刷用CSSの確認方法

上記で設定したCSSは通常画面では表示されません。
では、どのように印刷用のCSSを確認するか。

デベロッパーツールで確認できます。

表示方法

Chromeで表示する方法です。

① キーボード[F12]でデベロッパーツールを表示し、[⋮]をクリック
② [Show Console drawer]をクリックし、Console画面を表示

③ [⋮]をクリック

④ [Rendering]を選び、Renderingタブを表示する。

⑤ [Rendering]タブに切り替え、下のほうにある[Emulate CSS media type]、ドロップダウンリストで[print]を選ぶ。

@media printを使うことで印刷禁止も設定可能

企業によっては「この写真は印刷NG」とか「このテキストは印刷では隠してほしい」というご要望もあります。
その際にも@media printを使うことで印刷禁止にすることができます。