HTMLの画像データが印刷で表示されません

質問

シロウト技で自社ウェブサイトを構築したのですが、画像でつくった文字データが印刷すると表示されなくなってしまいます。商品の写真などは問題ないのですが。。。どなたかご教示ください。

回答No.1

ORUKA1951 · ベストアンサー

背景として使われていれば印刷されません。
なお、文字データとして重要なものは、画像にしてはなりません。
「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」は明確に否定されています。
印刷が想定されるページは、商品の写真は表示サイズより数倍大きなピクセル数で作成してHTML(またはスタイルシート)上で、サイズを指定します。
　それ以外は、できるだけテキストでマークアップして、不必要な画像は背景にしましょう。

　たとえば、商品リストでしたら
<ul>
　<li>商品名
　　<ul>
　　　<li>画像(altで画像がなくても理解できる商品説明)</li>
　　　<li>価格</li>
　　　<li>仕様</li>
　　　<li>説明</li>
　　　<li>販売価格</li>
　　　<li class="goCart"><a href="./cart.cgi?m=1234">カートへ</a></li>
　　</ul>
　</li>
・・・
　のようにマークアップして、カートへのリンクはブラウザではボタンの背景画像で表示させるなど。この場合は、印刷用スタイルシートでは.goCartは消してしまうとかが良いでしょうね。

　なお、クライアントにブラウザでの描画イメージを伝えるときは、firefox+Pearl Crescent Page Saver Basic ( https://addons.mozilla.jp/firefox/details/10367 )を使うと、ウィンドウに表示されている部分だけでなくページ全体を高解像度で背景も含めて印刷できます。

補足

アドバイスありがとうございます。どうしても文字を画像として使いたかったら、<A Href="http://www.ushikai.com/" Target="_blank">
<Img Src="sanrin.gif" Border="0" Width="92" Height="63">
</A>といった様にスタイルシートの背景設定ではなく、HTMLで直接画像を指定するといいのでしょうか？

回答No.5

ORUKA1951

＞とりあえず、自分で再構築してみます!

　それが一番です。

　ただ、あまり使われないプロパティなのでヒントだけ
★<li><a href=""><img src="" width="" height="" alt=""></a>
　の場合は、visibilityプロパティで元の画像を消します。それ以外の指定は従来どおり
★<li><a href="">テキスト</a>
　の場合で、テキストを消して画像を使う場合は、
　　<li><a href=""><span>テキスト</span></a>
　でvisibilityでテキストを消して背景画像を指定し
　印刷時にはcontentで画像を追加。
★<li><a href="">テキスト</a>
　の場合(画像は背景でテキストは生かしておく)は、
　印刷時(media=print)には、contentプロパティで画像を追加するか、なにもしない。

　最下段の方法がもっとも良いとは思います。なんといってもHTMLがシンプルですし、SEOとしても、あらゆる端末に対しても・・
　その上は、次善の策です。ただspanで文字を消すのは将来的にSEO的にまずくなるかも・・
　最初の方法は、後方互換性はもっとも良いでしょう。

お礼

ありがとうございました！とっても助かりました。

回答No.4

ORUKA1951

＞現在画像はCSSのbackground-imageで指定してまして、マウスが画像にのるとCSSのhover、background-positionで画像の位置が変わる様にしています。これと同じ機能をHTMLで持たせるにはどうすればいいのでしょうか？？

　いえ、HTMLは文書構造さえ正しくマークアップされていれば、シンプルで簡単なものでよいのですよ。質問や今までの補足では、HTMLの文書構造がわかりませんので、具体的な方法は示せませんが、簡単な例を挙げておきます。

　それが、ナビゲーションリンクだとすると、次のようにマークアップするでしょう。
[HTML4.01]--class名は文書構造を補完するためにつけています---
　→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　→『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』

<div class="nav">
　<ul>
　　<li><a href="./index.html">トップ</a></li>
　　<li><a href="./news/">製品</a></li>
　　<li><a href="./product/">製品</a></li>
　　<li><a href="./info/">会社情報</a></li>
　　<li><a href="./contact/">問合せ</a></li>
　</ul>
</div>
HTML5でしたら
<nav>
　<ul>
　　<li><a href="./index.html">トップ</a></li>
　　<li><a href="./news/">製品</a></li>
　　<li><a href="./product/">製品</a></li>
　　<li><a href="./info/">会社情報</a></li>
　　<li><a href="./contact/">問合せ</a></li>
　</ul>
</nav>

　ここまでは、簡単ですね。
　HTMLにはプレゼンテーションに関わるものは一切書かれていませんから、どのように表現するのもまったく自由です。
　次にプレゼンテーションをスタイルシートで指定します。

★このようなナビゲーションを画像--ボタン--で表現する場合は、サイズに影響されない背景画像を使わない限り、ボタンサイズが画像の大きさに制約されますから、リキッドデザインは基本的に無理です。
　最近は端末がスマホのような小さなものから、とても広いディスプレイまで様々なので固定デザインを使うことは少なくなりましたね。

　お話から背景画像はスプライトだと思います。とりあえず、現在使おうとしている画像サイズ(ボタンとしたときの表示サイズ)と全体のサイズを教えてください。
　印刷時にその背景画像も表示させたいか否かもあわせて・・どちらでもできます。

補足

懇切丁寧なご説明、誠にありがとうございました。とても勉強になりました。とりあえず、自分で再構築してみます!

回答No.3

ORUKA1951

No.1,No.2です。
　もう少し詳しく説明すると、その画像が単なる背景なのか、意味のある画像なのかと言うことです。具体的な例で
・商品のサムネイル画像
　これは、画像自体がデータですから画像としてマークアップします。
・リンクボタン
　これは、プレゼンテーションですから、画像は背景です。
・リンクボタンを兼ねたサムネイル画像
　これは画像ですが、画像なしで表示させたときに情報が伝わるかを考慮する。a要素にtitleで説明を書き、それを印刷時にはtitleらしく印刷することもできます。

　もともと、HTMLは様々な端末で利用できるための仕様です。もっとも根幹になるコンセプトです。プレゼンテーションは別途スタイルシートで行います。なにもスタイルシートを書かなければブラウザが持つスタイルシートが適用されます。
　googleの検索エンジンはページをあたかもテキストブラウザのように利用しています。
　→『ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』

　もう一度、その画像が背景であるのか、必要な画像であるのかを確認して決めてください。「テキストの代わりに画像」の場合は、必要ない場合が多いです。その場合は背景が印刷されないときに適切な文字が印刷されるように設計すべきです。

　堅苦しく言うとこうなります。個人の趣味のサイトならそこまで考える必要はありません。

補足

ありがとうございます。もう少し教えてください。現在画像はCSSのbackground-imageで指定してまして、マウスが画像にのるとCSSのhover、background-positionで画像の位置が変わる様にしています。これと同じ機能をHTMLで持たせるにはどうすればいいのでしょうか？？

回答No.2

ORUKA1951

＞どうしても文字を画像として使いたかったら、<A Href="http://www.ushikai.com/" Target="_blank">
<Img Src="sanrin.gif" Border="0" Width="92" Height="63">
</A>といった様にスタイルシートの背景設定ではなく、HTMLで直接画像を指定するといいのでしょうか？
　そうです。そのときに必ずaltに画像が表示されなかったときのために、写真に代わる詳しい説明を書くべきとされています。
すなわち
<a href="[URL]"><img src="[URL]" width="92" height="63" alt="黒い小型掃除機"></a>
のように、なお
aのtarget，画像のborderは非推奨です。
　フレームを使われているとしたら、本来はframeも使わないほうが良かったですね。