"CSS Tips Factory" : Presented by Nishishi via WordPress.

印刷時にのみ有効になるスタイルを作る []

普通にスタイルシートを記述すれば、その装飾は画面表示にも印刷にも使われます。メディアタイプを指定してスタイルを記述すれば、特定の環境にのみ適用させるスタイルを作ることもできます。例えば、印刷時にのみ適用させるとか。

方法は簡単で、「@media」の記述に続いてメディアタイプを書くだけです。
例えば、以下のようなソースで。

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

上記のように、「@media 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] */
   }
}

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

visibilityプロパティは、表示・非表示を指定するプロパティです。hiddenを指定すると表示されなくなり、visibleを指定すると表示されます。

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

印刷した場合のみここの文字が表示されます。

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

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。