こんにちは、少々困っているので質問させて頂きます。

質問

こんにちは、少々困っているので質問させて頂きます。
CS4のフォトショップを使って画像をスライスし、Web上で結合表示させようとして居ます。
IEとスレイプニルでは、きちんと結合して表示されるのですが、ファイヤフォックスで表示できません。
色々調べて、ファイアフォックスの表示とIEでの表示が違う事は分ったのですが、一体どこを変えたら、両方ともきちんと表示されるのでしょうか？
Webで調べたりもしたのですが、どうしてもわからないので質問させて頂きます。
画像は、フォトショの「Webおよびデバイス用に保存」で出るソースを使用して結合させています。

回答No.4

ORUKA1951 · ベストアンサー

＞と言われて居られますが、これは画像を背景画像として読み込み、
＞その上にリンクを配置させるという認識でよろしいのでしょうか？
＞その場合、リンクボタンの位置を調整したりすることも可能だと思う
＞のですが、それはスタイルシートの方で指示するのでしょうか？
　そうです。サンプルのHTML部分のソースを見るとお分かりのように、きわめてシンプルで、検索エンジンもナビゲーションリンクだと容易に理解できることは想像に難くないと思います。class名をnavにしているのは、将来のHTML5では、<nav>というナビゲーションリンクリストが導入される予定になっているからです。
<ul id="nav">
　　<li id="pa1"><a href="p1.html">１ページへ</a></li>
　　<li id="pa2"><a href="p2.html">２ページへ</a></li>
　　<li id="pa3"><a href="p3.html">３ページへ</a></li>
</ul>
　これをスタイルシートでは、リストでなくブロックに変換して、その背景画像を設定しています。
　そして、
・それぞれのリンクもボックスにして、ボーダーをつけています。
・ボーダーはoutsetにしてあるので浮き上がった形
・この背景画像は、上と同じものを位置をボタンの位置(a,b)分左上にずらしていますから表示されるものは、背景のその部分にあるものと同じです。
・このリンクをクリックすると、縁がinsetというくぼんだ縁取りになると同時に、文字自体も右下にずらしています。
・このとき背景もずらしています。
　結果的に、画像を貼り付けたボタンがへこんだように見えます。

　この方法のよいのは、
★位置や数が増えても画像を切りなおさなくてもよい
　　任意に変更できます。
★背景画像を変更しても問題ない

そしてなによりも、
★サーチエンジン最適化(SEO)としては万全です。
★スタイルシートが利かない携帯端末はむろん、読み上げブラウザ点字ブラウザも情報を得られる

お礼

回答有難う御座います。

なるほど・・・とても勉強に成ります。
まだまだ分らない事だらけなので、少しづつ挑戦してみようと思います。
前任者が、スライスをして作っていたので、それを真似しなければと、躍起になっていました。
ORUKAさんが仰る方法の方が、色々と便利な事が分りました。
それだけでも、かなりの収穫です。
近日中に挑戦してみようと思います。
また分らない事が出来たら、捕捉で質問させて頂きたいので、閉じないでおきます。よろしくお願いします。

補足

お久しぶりです。

あれから、色々やって見たのですが、取り敢えず、今は時間がないと言う事で、上司に凝った物じゃなくて良いからと言われ、分解して居た画像を元に戻し、それをスタイルシートで背景として張り付けるだけに終わりました。
本当は、画像の中にリンクをつけたかったのですが、まあ仕方がないですね。
自分の勉強不足ですし、これからもっと勉強してみようと思います。
補足でお礼と言うのも変ですが、助かりました。
本当に有難う御座います。

回答No.3

uriboar

Firefox3.5.7にて補足のソースをレンダリングいたしました。
Quirks (後方互換) モードです。
画像が無いので意図された通りかどうかは分かりませんが、きちんと1つの長方形になっておりますし、特に崩れているようには思いません。

しかし、このような記述のしかたは、SEOの観点からも、アクセス性の観点からも好ましくないですね。

No.2の方の回答のとおり、スタイルシートを使用するほうがよいと思います。
背景とリンクボタンの画像を別々で作成できますし、その後の位置調整もフォトショップをいちいち起動する必要はなく、スタイルシートだけで済みますので、楽だと思います。
今後Web制作を続けるのであれば、必ず役に立ちますので、トライしてみてください。

お礼

回答有難う御座います。

きちんと長方形に成ってますね・・・画像を入れ込むとダメなんですかね？
まあ、何にせよこの方法だと支障が多いと言う事が分りました。
それだけでもかなりの収穫ですし、今後のWeb活動に活かしていけると思います。
仰られる通り、今後の事も考えて、時間はかかろうともスタイルシートに挑戦してみようと思います。
アドバイス、有難う御座いました。

回答No.2

ORUKA1951

IEとSleipnirでは、SleipnirがレンダリングエンジンにIEを使用しているので、二つというわけじゃないです。
　テストするなら、firefox,GoogleChrome,Opera,Safriを使わないとダメだよ。その結果は、IEだけが崩れるという結果になります。

　ただ、
＞Web上で結合表示させようとして居ます。
　は、誤ったHTMLの書き方のように思われます。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
# メーカー独自拡張のHTMLを使う。
# テキストを画像に置き換えて表現する。
# 余白制御のために画像を用いる。
# ページレイアウトの目的で表を用いる。
# HTMLでページを作らずにプログラムに頼る。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　画像をスライスして配置しなくても、一枚の画像のまま、希望のデザインはできます。当然、隙間が空くこともないし、携帯電話だろうがスタイルシートを解除しようが、情報は正しく伝わるし、SEOの上からもはるかによい。

下記に、以前に回答したときのサンプルがあります。
画像内にリンクボタンを作成したいのですが。 - 教えて！goo ( http://oshiete1.goo.ne.jp/qa5630367.html# )

補足

早速の回答有難う御座います。

スレイプニルがIEと同じと言うのは、概ね気付いていたのですが、違う物だと言う先入観が働いていたようです。ご指摘有難う御座います。
前任者から殆ど説明も受けず、スタイルシートの知識も殆どない状態で作成していますので、理解に時間がかかってしまいますが、御容赦ください。
アドバイスいただいている内容に、

＞画像をスライスして配置しなくても、一枚の画像のまま、希望のデザインはできます。当然、隙間が空くこともないし、携帯電話だろうがスタイルシートを解除しようが、情報は正しく伝わるし、SEOの上からもはるかによい。

と言われて居られますが、これは画像を背景画像として読み込み、その上にリンクを配置させるという認識でよろしいのでしょうか？
その場合、リンクボタンの位置を調整したりすることも可能だと思うのですが、それはスタイルシートの方で指示するのでしょうか？
参考リンクの方も今読ませて頂いて、必死に理解している最中ですので、見当違いでしたら申し訳ありません。（汗）

回答No.1

uriboar

CS4は使ったことないので分かりませんが、6の頃のスライス機能から、とてもいい加減なHTMLを作成してくれるので、おそらくそのあたりが原因かと思います。

差し支えなければ、適当なスライスを作成して、HTMLのソースだけでも補足に示していただけないでしょうか？
私が分からなくても、他の方が回答できるかもしれません。

補足

早速の回答ありがとうございます。
仰られる通りだと思いましたので、作成されたソースを提示させて頂きます。
何方か、分かる方がおられましたらお願いいたします。

<div id="main">
<!-- ImageReady Slices (topimage(original).psd) -->
<table id="_____01" width="800" height="311" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/top.gif" width="800" height="122" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/top.gif" width="642" height="31" alt=""></td>
<td colspan="2">
<img src="images/top.gif" width="86" height="31" alt=""></td>
<td>
<img src="images/top.gif" width="72" height="31" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/top.gif" width="800" height="14" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/top.gif" width="632" height="29" alt=""></td>
<td colspan="3">
<img src="images/top.gif" width="96" height="29" alt=""></td>
<td>
<img src="images/top.gif" width="72" height="29" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/top.gif" width="800" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/top.gif" width="547" height="29" alt=""></td>
<td colspan="3">
<img src="images/top.gif" width="104" height="29" alt=""></td>
<td colspan="2">
<img src="images/top.gif" width="149" height="29" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/top.gif" width="800" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="spacer.gif" width="547" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="72" height="1" alt=""></td>
</tr>
</table>

<!-- End ImageReady Slic