Webページ印刷の画像分解表示

>htmlとして保存して開いて印刷をするとページの画像や文字などが切り刻まれたようにばらばらに写って印刷されてしまいます。

それが結局はスライス効果な訳ですよね。
スライス書き出しの一つの狙いとして、画像をコピーによって盗用されることを防ぐ意味も有るそうです。

ただ、解決法と言うことになると、私も分かりません。

http://illustrator-ok.com/illustrator_koza/web/contents/web5.html

このページの最後の画像も、IE以外ではバラバラになって、まともに表示されません。
対策が今のところ分からないまま、放置していますが。

若し対策の分かる方がおられたら、私も聞きたいんですが。

確かにIllustratorのスライス機能は出来がイマイチですね。

対策としては、脱出パズルのようにいろんな形ができないように、碁盤の目の形にスライスを作成してください。（幅は行ごとに違ってもＯＫです）

とろやんさん、いつも専門的なコメント有難うございます。

>確かにIllustratorのスライス機能は出来がイマイチですね。

ふーん、成るほどね。
それにしても、任意の形でスライスできないってのも、それはそれで面白く有りませんね。
でもやはりIllustratorの受け持ち区域は、Webじゃないし。

有難うございました。

No.16622 亭主さん：

> http://illustrator-ok.com/illustrator_koza/web/contents/web5.html
>
> このページの最後の画像も、IE以外ではバラバラになって、まともに表示されません。
> 対策が今のところ分からないまま、放置していますが。

スライス書き出し時に生成されたHTMLから、

<style type="text/css">td img {display: block;}</style>

に相当するコードを写し忘れていると思います。これを挿入す
ると、解決すると思います。これがないと、FirefoxやOperaで
はtd要素が内包するimg要素と同じサイズになってくれないの
ですね。

あと、確認するとき、Firefox+Firebugで行ったんでたまたま
発見できたのですが、spacer.gifへのリンクが切れているよう
です。ご確認ください。

CLさん
いつも専門的なアドバイス、有難うございます。今後もよろしくお願いいたします。

<style type="text/css">td img {display: block;}</style>
を挿入したら、FirefoxでもOperaでも表示が正常になりました。助かりました。

尤も事情を完全に理解してやった訳ではないので、場所が正しかったか？、或いは方法が正しかったか？、イマイチ覚束ない点は残るのですが。

Another HTML-lint で検証してみたら、その部分（深刻度 9）を含め、ページ全体で－27点で「がんばりましょう」と出ました。
他のページは比較的まともな点数が出るのですが。

取り合えず表示が正常化したということで、今の段階で「良し」としました。
spacer.gifへのリンクが切れの件なども、今後見直してみたいとおもいます。

有難うございました。

No.16645 亭主さん：

> <style type="text/css">td img {display: block;}</style>
> を挿入したら、FirefoxでもOperaでも表示が正常になりました。助かりました。
>
> 尤も事情を完全に理解してやった訳ではないので、場所が正しかったか？、或いは方法が正しかったか？、イマイチ覚束ない点は残るのですが。

今回は、Fireworksから書き出されるHTMLと、亭主さん
の作例ページの差分を取って、不足しているところを確
認しました。

該当コード自体は、Fireworksから書き出されるHTMLに
含まれていました。位置としては、head要素内になって
いました。

当初、Illustratorからのスライス書き出しにも入って
いるものと思っていましたが、Illustrator 10からデ
フォルト設定で書き出したものを確認したら、そのよう
なコードがありませんでした。Fireworksから書き出さ
れるこのコードは、HTMLバージョンでのボックスモデル
の違いによるふるまいの差異をなくすために入れられて
いるものだと思います。

亭主さんの作例ページでは、XHTML 1.0 Strictを採用し
ているため、Illustratorから書き出されたままでは正
常な表示ができない状況であったものと考えられます。
XHTML 1.0 Transitionalを採用していれば、前出のスタ
イルシートによる補正は要らないようです（Illustrator
CS3のXHTML書き出しでは、DOCTYPE宣言をTransitional
で書き出しますので、ユーザがStrictに書き換えたら、
やっぱり崩れます）。

>Another HTML-lint で検証してみたら、その部分（深刻度 9）を含め、ページ全体で－27点で「がんばりましょう」と出ました。

Another HTML-lintで引っかからないようにするには、
採用したHTMLバージョンに合わせた書き換えが必要に
なります。style要素についてはhead要素の中に入れ
ると解消するのではないでしょうか。また、
Illustratorが書き出したコードにも手を加えなくては
いけません。

CLさん、重ね重ねのアドバイス、しかもIllustratorとFireworksでの書き出し比較までして頂き、有難うございます。

<style type="text/css">td img {display: block;}</style>は、head要素に移しました。そうですよね、考えてみれば当然のことでした。
お陰で、Another HTML-lintでの採点は、-20点に「改善」しました。
エラーも殆ど、スライス書き出し表示の部分に集中していて、確かに、XHTML 1.0 Strictでの、規格の問題のようです。

元々、HTMLについての知識など皆無だった私が、Dreamweaver の機能と、書籍による知識に頼ってのサイト造りだった訳です。
そう言う私にとって、StrictもTransitionalも同じことで、今流行りの「構造と見栄えの分離」ってやつをやるに付いて、どうせなら一番厳格であろう、Strictでやってみよう、と言うことでした。

まあしかし、今のところこの辺が私の限界のようです。
Strictに準拠したIllustratorスライスコードの変更などは、もう少し全体のスキルアップの中でしか対応できないようです。

有難うございました。