【HTML】印刷用CSSの設定方法(media属性/メディアクエリ )と確認方法
スポンサーリンク

こんにちは!WEBデザイナーのこたです。

WEB制作をしているときに、たまーにですがサイトを印刷する際のデザインもこだわりたいというお客様がいらっしゃいます。

はじめてそのような案件に出会った時に「印刷するときのデザインなんて変えられるのか?」と疑問に思ったのと不安がよぎりました。。

調べてみたら印刷用のCSSを設定する方法がありました。

必要性はあまりないかもしれませんが、同じ悩みをもった方に少しでもお役に立てればと思い、今回ご紹介させていただきます。

では、さっそく参りましょう!

印刷用のCSSを別ファイルで作り、読み込む

<head>
    <link rel="stylesheet" hrerf="css/print.css" media="print">
</head>

いつものCSSを読み込むタグにmedia属性を追加します。

media属性の値を「media="print"」にすると、ページを印刷するときだけ読み込まれるCSSファイルを作ることができます。

利用シーン
ブラウザはプリント時に読み辛くなる背景色や背景画像を取り除くなどの処理を自動的に行います。
なので、画面用のCSSとは別に、ページを印刷するときのレイアウトを整える必要がある場合もあります。
そもそもWebページを印刷したいという需要も以前に比べ減少しているので、印刷用のCSSをわざわざ用意する必要もないかもしれませんね。

style要素にmedia属性でprintを指定する

<style  type="text/css" media="print">
印刷用のCSS
</style>

style要素に「media="print"」を指定してスタイル定義を記述します。

 

スポンサーリンク

メディアクエリで印刷用CSSを指定する

<style type="text/css">
@media print{
  印刷用CSSの定義を指定する
}
</style>

最もおすすめしたいのは、レスポンシブと同様にCSS3のMedia Queries(メディアクエリ )を使って既存のCSS内で印刷用CSSを指定する方法です。

この方法でしたら別ファイルを作成せずに、既存のCSS1つで済むため、CSSを読み込む負荷をかけずにサイト速度アップを図れます。

印刷用のCSSを設定したあとに画面表示で確認する方法

印刷用のCSSを設定はしたけど、どうやって確認すればいいのか?

通常の画面では印刷用のCSSは適用されないため、確認ができません。

そのため、CSS指定がうまく反映されているのかを確認したりするのが大変でした。

しかし、下記の方法で無事解決しました。

Google Chromeでの作業方法

  1. Developer Toolsを表示して、画面下のタブの左にある[⋮]をクリック
  2. [More tools]を選ぶ
  3. [Rendering]をび、Renderingタブを表示する
  4. [Emulate CSS media type]を[print]に設定する
スポンサーリンク
おすすめの記事