普通にスタイルシートを記述すれば、その装飾は画面表示だけでなく「ウェブページを印刷した際」にも使われます。しかし、印刷時にはもっとシンプルなデザインで済ませる方が見やすくなる、というケースもありますよね。そんなときには、印刷時にのみ有効になるスタイルシートを使って装飾を施すのが便利です。

CSSソースではメディアタイプを指定してスタイルを記述することで、特定の環境だけで適用されるスタイルを作ることができます。その「特定の環境」の中には「印刷時」もあります。つまり、ウェブページが印刷される際にだけ適用されるスタイルを作ることができます。

印刷される際にだけ適用されるスタイルシートを書く方法

ウェブページが印刷される際にだけ適用されるスタイルを書く方法は簡単で、下記ソースのように「@media」の記述に続いてメディアタイプとして「print」と記述するだけです。

@media print {
   body {
      background-color: #ffffff;
   }
}

上記のCSSソースのように、「@media print { ～ }」の間に記述したスタイルは、印刷時にのみ適用されるスタイルになります。画面表示では使われません。

印刷時にだけ適用されるスタイルシートの活用例

このメディアタイプ「print」を指定して装飾する方法を活用すると、「画面表示では背景に色が塗られているものの、印刷時には背景を白色にする」といった装飾が可能です。インクを無駄にしないためや、白黒印刷されたときに見やすくするためなど、「印刷時にはない方が見やすい装飾」を画面表示に使っている場合に活用すると親切かも知れません。

例えば、以下のようにスタイルシートを記述すると、印刷時には背景色が白色で、それ以外の場合には背景色が淡い黄色になる装飾を実現できます。

body {
   background-color: #ffffcc; /* [A] */
}
@media print {
   body {
      background-color: #ffffff; /* [B] */
   }
}

最初の[A]の部分は、すべての環境で有効になるスタイルです。ページの背景色を淡い黄色にしています。
次の[B]の部分は、印刷時にのみ有効になるスタイルです。ページの背景色を白色にしています。
スタイルシートの仕様では、同じプロパティが同じ優先度で記述されている場合には「後に指定されたものが採用」されるので、印刷時の背景色は白色になります。

同様の方法で、「印刷時にのみ表示される文字」を作ることもできます。画面には表示されないけれども印刷すると現れる文字です。
先ほどと記述方法はまったく同じで、以下のような感じで書きます。

p.print {
   visibility: hidden; /* [A] */
}
@media print {
   p.print {
      visibility: visible; /* [B] */
   }
}

class名に「print」が指定されたp要素（＝<p class="print"> ～ </p>）を対象にして装飾しています。
印刷時には[B]で指定しているとおり「表示(visible)」されますが、印刷自以外の場合は[A]で指定しているとおり「非表示(hidden)」になります。

上記の方法を試した例は、以下の通りです。
以下には、空のボックスしか見えていないと思いますが、印刷すると文字が表示されていることが分かります。（実際に印刷させなくても、ブラウザの「印刷プレビュー」を使うと分かります。）

※visibilityプロパティは、表示・非表示を指定するプロパティです。hiddenを指定すると表示されなくなり、visibleを指定すると表示されます。たぶんこの目的ではdisplayプロパティを使った方が良いと思いますが。ここでは「中身が空っぽ」であるボックスを目で確認できるようvisibilityプロパティの方を使いました。(displayプロパティに値「none」を指定すれば、ボックスそのものが単に非表示になるだけではなく、あたかもボックス自体が存在しないかのように後続の要素が手前に詰めて表示されます。)

なお、印刷時にのみ別のデザインを適用するメリットの例としては2005年にAll Aboutで記事「印刷用に別デザインを用意！ 印刷専用のスタイルシートを作る」を書いてますので、そちらも併せてご参照下さい。

(更新日：2016年01月28日)