ページの背景として設定した画像を印刷にも反映させるための小技
需要があるかどうかは分かりませんが、imgタグでHTMLに埋め込まず、CSSを利用して背景として読み込む設定にした画像を、ページを印刷する時にも反映させるためのちょっとした小技を紹介します。
導入
まず、今回の小技がどう役立つのかの状況説明。
- 背景に設定（CSSにおいて
backgroundプロパティで指定）した画像は、ページの印刷時には反映されない。（読み込まれない） - 画像の右クリック保存防止*1のため、または文書構造上の配慮などから
imgタグを用いず、CSSからブロック要素の背景として画像を読み込む構成にした場合に、それらの画像を印刷時のページにも反映したい。
こういった状況下において、今回の小技は何らか役に立つのではないかと思われます。
因みに、この小技を実施する上では、
- 印刷ページ用のCSS定義を行う
というのが大前提です。
そもそも、印刷ページ専用のCSS定義を行っていないページというのが、かなり多いのが実情かもしれませんが、本件を実施するに当たっては、まず印刷ページ専用のCSS定義を行うことになります。
方法としては、@mediaルールを用いてメディアタイプにprintを指定し、その中に各スタイル定義のプロパティを指定するという形になります。((因みに、メディアタイプにscreenを指定すると、通常のモニター表示に対するスタイルとなります。))
@media print {
property : value ;
:
:
}コード例
ここでは以下のサンプルコードをそれぞれ、”test.html”、”default.css”に保存するものとします。
HTML(test.html):
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="cover">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
CSS(default.css):
@media screen {
body {
background-image: url("bg_img.jpg");
}
}
@media print {
div#cover:after {
content: url("bg_img.jpg");
}
}
解説
この例では、単純にモニター表示用の背景画像を、印刷時に単独の画像として印刷に反映させることしかしていませんが、これに表示位置制御のスタイルを適応するなど、応用次第では色々使い道があるのではないかと思います。
ポイントとしては、モニター表示用にはbackground（background-image）プロパティでurl()関数を使用して読み込んだ画像を、印刷時にはcontentプロパティに設定して読み込む、という点です。
因みに、contentプロパティは:beforeまたは:afterの擬似要素が適応対象となるので、contentプロパティを用いる時は、セレクタに:beforeまたは:afterを付加するのをお忘れなく。
:beforeと:afterの違いは、付加したセレクタ要素内のコンテンツの、先頭にcontentでしたコンテンツが付加されるか、末尾に付加されるかの違いです。
div#cover:before
[bg_img.jpg]
タイトル
本文div#cover:after
タイトル
本文
[bg_img.jpg]注意点
現状でテストした限りですと、この小技はIEでは反映されない模様です。*2画像分のスペースは空けられてレイアウトされるようですが、画像自体は表示されません。著作権に対する配慮などからなのでしょうか。
なお、IE以外のFirefoxやGoogle ChromeなどWeb標準に準拠する意思のあるブラウザでは正常に反映されます。
ですので、IEユーザをあえて締め出したいWebデザインの場合などに是非ご活用下さい。;-)
