2007/09/05(Wed) 09:14:14 [ No.16622 ]
確かにIllustratorのスライス機能は出来がイマイチですね。
対策としては、脱出パズルのようにいろんな形ができないように、碁盤の目の形にスライスを作成してください。（幅は行ごとに違ってもＯＫです）
2007/09/05(Wed) 09:48:28 [ No.16623 ]
とろやんさん、いつも専門的なコメント有難うございます。
>確かにIllustratorのスライス機能は出来がイマイチですね。
ふーん、成るほどね。
それにしても、任意の形でスライスできないってのも、それはそれで面白く有りませんね。
でもやはりIllustratorの受け持ち区域は、Webじゃないし。
有難うございました。
2007/09/05(Wed) 21:20:18 [ No.16633 ]
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へのリンクが切れているよう
です。ご確認ください。
2007/09/09(Sun) 02:36:04 [ No.16644 ]
CLさん
いつも専門的なアドバイス、有難うございます。今後もよろしくお願いいたします。
<style type="text/css">td img {display: block;}</style>
を挿入したら、FirefoxでもOperaでも表示が正常になりました。助かりました。
尤も事情を完全に理解してやった訳ではないので、場所が正しかったか？、或いは方法が正しかったか？、イマイチ覚束ない点は残るのですが。
Another HTML-lint で検証してみたら、その部分（深刻度 9）を含め、ページ全体で−27点で「がんばりましょう」と出ました。
他のページは比較的まともな点数が出るのですが。
取り合えず表示が正常化したということで、今の段階で「良し」としました。
spacer.gifへのリンクが切れの件なども、今後見直してみたいとおもいます。
有難うございました。
2007/09/09(Sun) 07:56:20 [ No.16645 ]
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が書き出したコードにも手を加えなくては
いけません。
2007/09/09(Sun) 11:57:04 [ No.16646 ]
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スライスコードの変更などは、もう少し全体のスキルアップの中でしか対応できないようです。
有難うございました。
2007/09/09(Sun) 13:19:09 [ No.16648 ]
