個別記事

前後の記事

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

この記事が属するカテゴリー
CSS

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

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

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

2005-12-27T19:42:28+09:00 | コメント (8) | トラックバック (2) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/353

このリストは、次のエントリーを参照しています: 印刷用 CSS で背景画像を印刷させる方法:

110chang - Blog さんからのトラックバック
画像置換法と印刷
僕自身はこの画像置換法というやつは使ったことがありません。なぜかというと・・・... [続きを読む]
2006年02月20日 22:52
アキラ's ＩＴメモ さんからのトラックバック
CSSで背景画像を印刷させる方法
スタイルシートのbackgroundで指定している画像はどうやら印刷時には出てこ... [続きを読む]
2007年01月07日 17:54

コメント

モカ さんからのコメント

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

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

2005年12月27日 21:25
e-luck さんからのコメント [TypeKey Profile Page]

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

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

2005年12月27日 23:43
モカ さんからのコメント

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

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

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

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

2005年12月28日 11:04
e-luck さんからのコメント [TypeKey Profile Page]

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

2005年12月30日 13:54
モカ さんからのコメント

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

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

2006年01月01日 22:29
突っ込み大使 さんからのコメント

注：firefox、operaは無理

2007年04月25日 20:30
突っ込み大使 さんからのコメント

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

2007年04月25日 20:36
突っ込み大使 さんからのコメント

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

2007年04月25日 21:26

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)