【徹底解説!】CSSで印刷用のスタイルシートを作成しよう!

こんにちは、chieitoです!最近「色彩」についての勉強を始めました。色彩はデザインだけでなく、メイクやファッションなどにも役立つのでおすすめです。

では本題ですが、「印刷用のCSS」って聞いたことがありますか?Webサイトを作成するにあたり、この印刷用のCSSシートはとても重要になってきます。ユーザーにとって便利で見やすいWebサイトにするために、CSSを使った印刷用スタイルシートを作成しましょう。

ここでは、その具体的なやり方などを徹底解説します。ぜひ参考にしてみてださいね!

CSSの印刷用スタイルシートって?

Webサイトを作成する際、CSSを使って文字色やサイズなどのデザイン部分を構成していきますよね。このCSSは、パソコンやスマホなどのスクリーンだけでなく、テレビや印刷、プロジェクターなど様々な媒体に対応させることが可能です。そのため、まずはどの属性のCSSなのかを設定しなければなりません。

CSSのメディアタイプには、

  • screen(パソコンなどのディスプレイ)
  • print(印刷)
  • projection(プロジェクター)
  • tv(テレビ)
  • braille(点字ディスプレイ)
  • all(全て)

などがあります。

今回はCSSの印刷用スタイルシートを作成するので、media属性の「print」を選びます!

CSSで印刷用に対応していないとどうなる?

必ずしも印刷用のCSSスタイルシートを作成しなければならないというわけではありません。

例えば、

  • メニューバーや戻るボタン
  • ヘッダー画像
  • リンクURL

など。

これらはWebサイト上ではクリックできるので便利ですが、印刷した際は不要です。このような箇所を、印刷用CSSで表示させないようにするなどデザインしていくと、とても見やすくなります。

難しい作業ではないので、スクリーン属性のCSSと一緒に印刷用のCSSも作成しましょう!

CSSで印刷用スタイルシートを作成しよう!

ではここで、実際に印刷用CSSのコード記述方法など詳しいやり方をご説明します。

印刷用CSSのメディアタイプを設定

前述したように、まず最初にCSSのメディアタイプを設定します。ここでは印刷用CSSを作成するので、media属性「print」です。

上段はパソコンディスプレイ用のCSS下段が印刷用のCSSです。このコードを、<link>要素を使ってHTML内に記述していきます。

このようにコードを記述すると、

まだCSSを作成していないのでシンプルな表示になります。

2つ目の方法として、1つのCSSシートを使って全ての属性に対応させたい場合は、

media属性を「all」にしておきましょう。

印刷用CSSシートを読み込ませる方法

①media属性「print」を指定した場合

印刷用CSSのスタイルシートを用意しHTML内にmedia属性を記入したら、早速コードを記述していきます。

印刷用とスクリーン用のCSSはそれぞれ別のスタイルシートが必要です。同じシート内に記述しないように気をつけましょう!

②media属性「all」を指定した場合

全てのメディアタイプに対応するようにした場合は、

このように「@media print」を使って1つのCSS内に記述していきます。「print」の部分を変更すれば、様々な属性に対応させることが可能です。

<link>要素内のmedia属性を間違えないように注意しましょう!

複数の属性を指定する場合、「all」でもOKですが、上記のようにメディアタイプを(,)で区切って記述することも可能です。

CSSに印刷用のコードを記述する方法

CSSの記述方法は、どの属性も同じです。印刷用だけ特別な記述があるというわけではありません!

例えば、

このようなサイトで、CSS(screen属性)を使って<h1>部分の文字色を水色に変更する場合は、下記のような記述をします。

続いて印刷した際には文字色を青に、「印刷用CSSについて」という<h2>部分を印字させたくない場合は、CSS(print属性)に下記のような記述をします。

上記はそれぞれのCSSシートを用意した時の方法です。ごちゃごちゃしてわからなくなりそう…という人は、このようにそれぞれのCSSシートを用意することをおすすめします。

同じCSSシートに記述する場合は、

このように記述します。

ここでは、印刷した時に文字色をブラウンにし、<h2>要素が印字されないように記述しました。

コードを記述する際には、最後に「;」を忘れず、また「:」と「;」が逆になったりごちゃごちゃにならないように気をつけましょう!

印刷用CSSの反映を確認する方法は?

印刷される時に、本当に印刷用CSSが適用されているか気になりますよね。またWebサイトを作成するにあたって、印刷した場合の見え方もしっかりと確認しなければなりません。細部まで見落とさずにチェックしましょう!

印刷用のCSSを作成したら、ブラウザでプレビューを表示させます。スクリーン用のCSSが問題なく反映されているのを確認したら、[ファイル]→[印刷]でプレビューを表示してみて下さい。

ここのプレビューできちんと反映されていればOKです!

このようにプレビューを見ながら、微調整をしていきましょう。不要な部分を非表示にしたり、バランスが悪ければ印刷用のフォントサイズを変更してみて下さい。見やすくするために背景色をつけるのも良いですね!

まとめ

いかがでしたでしょうか!Webサイトを作っている中で、印刷する際の反映のされ方などはついつい忘れてしまいがちです。印刷用のCSSシートが必要ということを知らなかったという人も意外と多いのではないかと思います。

ブラウザで見ているWebサイトは、印刷すると少々見にくくなったりバランスが悪くなってしまうことも珍しくありません。せっかくWebサイトを作成するのであれば、印刷の仕上がりにもこだわりたいですよね!

ユーザーにとって便利で、尚且つ製作者自身も納得のいくようなWebサイトにしましょう。参考になれば嬉しいです!