印刷用 CSS で背景画像を印刷させる方法

media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。

カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくいくけど、2 バイト文字だと完全に文字が隠れないんで実は使えない。なんで、サンプル作ってみたけどヘッダ部分の h1 には 1 バイト文字使ってる。

うーん、そもそも最近 image replacement (背景画像置換)やんないから使うことは無いな。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/52

110chang - Blog - 画像置換法と印刷 (2006年2月20日 22:52)

僕自身はこの画像置換法というやつは使ったことがありません。なぜかというと・・・... 続きを読む

アキラ's ITメモ - CSSで背景画像を印刷させる方法 (2007年1月 7日 17:54)

スタイルシートのbackgroundで指定している画像はどうやら印刷時には出てこ... 続きを読む

Comments

モカ said:

 こんにちは。
 最近、印刷用のCSSを設定することが多くなってきたのですが、背景が像が印刷されないのが悩みでした。
(ブラウザーの設定で「背景イメージを印刷する」にすると出るようですが)
 なるほど、こうするといいのですね。
 いつも貴重な情報を有り難うございます。

 最近画像置換を使わないということは、タグで埋め込むということですか?

e-luck said:

>最近画像置換を使わないということは、タグで埋め込むということですか?

文字自体を text-indent やその他の方法で飛ばしてしまうのはやらなくなりましたね。画像非表示の環境で意味が伝わらなくなってしまうのは避けるようにしています。
今の当サイトのスタイルでも、画像非表示でも問題ないように作ってはいるつもりっす ;-)

モカ said:

 早速のご返事有り難うございます
 画像非表示にも配慮されているのですね。さすがです。

 私もh1やナビゲーションボタンに画像を使うとき、イメージタグを使うか、画像置換にするかいつも迷っています。

 ナビゲーションボタンを画像のロールオーバーにする場合、イメージタグを使って画像をはめ込むとJavascriptにしなければいけないので、ついつい画像置換+CSSによるロールオーバーにしてしまいがちなのですが、そのてんはどうされてるのでしょうか?
 もし何かよいアドバイスがございましたら是非よろしくお願いいたします。

 CSS初心者のため、はずしていたら申し訳ありません(^.^;)

e-luck said:

僕自身は、そのサイトのターゲットユーザによって img 要素 + JavaScript なのか、画像置換を使うのかの判断をすれば良いのかなと思ってます。
こうじゃなければいけないってのは無いかと :-)

モカ said:

 ご返事が遅くなって申し訳ありません。
 アドバイス有り難うございます。

 了解いたしました。
 その都度考えてゆこうと思います。
 有り難うございました。

突っ込み大使 said:

注:firefox、operaは無理

突っ込み大使 said:

かと思いきやいけた。 これはいい!

突っ込み大使 said:

かと思いきや...IE7ではうまくいかない... どうすればよいでしょう。