こんにちは、少々困っているので質問させて頂きます。
CS4のフォトショップを使って画像をスライスし、Web上で結合表示させようとして居ます。
IEとスレイプニルでは、きちんと結合して表示されるのですが、ファイヤフォックスで表示できません。
色々調べて、ファイアフォックスの表示とIEでの表示が違う事は分ったのですが、一体どこを変えたら、両方ともきちんと表示されるのでしょうか?
Webで調べたりもしたのですが、どうしてもわからないので質問させて頂きます。
画像は、フォトショの「Webおよびデバイス用に保存」で出るソースを使用して結合させています。
No.1
- 回答日時:
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
No.2
- 回答日時:
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-html4 … )]より
画像をスライスして配置しなくても、一枚の画像のまま、希望のデザインはできます。当然、隙間が空くこともないし、携帯電話だろうがスタイルシートを解除しようが、情報は正しく伝わるし、SEOの上からもはるかによい。
下記に、以前に回答したときのサンプルがあります。
画像内にリンクボタンを作成したいのですが。 - 教えて!goo ( http://oshiete1.goo.ne.jp/qa5630367.html# )
この回答への補足
早速の回答有難う御座います。
スレイプニルがIEと同じと言うのは、概ね気付いていたのですが、違う物だと言う先入観が働いていたようです。ご指摘有難う御座います。
前任者から殆ど説明も受けず、スタイルシートの知識も殆どない状態で作成していますので、理解に時間がかかってしまいますが、御容赦ください。
アドバイスいただいている内容に、
>画像をスライスして配置しなくても、一枚の画像のまま、希望のデザインはできます。当然、隙間が空くこともないし、携帯電話だろうがスタイルシートを解除しようが、情報は正しく伝わるし、SEOの上からもはるかによい。
と言われて居られますが、これは画像を背景画像として読み込み、その上にリンクを配置させるという認識でよろしいのでしょうか?
その場合、リンクボタンの位置を調整したりすることも可能だと思うのですが、それはスタイルシートの方で指示するのでしょうか?
参考リンクの方も今読ませて頂いて、必死に理解している最中ですので、見当違いでしたら申し訳ありません。(汗)
No.3
- 回答日時:
Firefox3.5.7にて補足のソースをレンダリングいたしました。
Quirks (後方互換) モードです。
画像が無いので意図された通りかどうかは分かりませんが、きちんと1つの長方形になっておりますし、特に崩れているようには思いません。
しかし、このような記述のしかたは、SEOの観点からも、アクセス性の観点からも好ましくないですね。
No.2の方の回答のとおり、スタイルシートを使用するほうがよいと思います。
背景とリンクボタンの画像を別々で作成できますし、その後の位置調整もフォトショップをいちいち起動する必要はなく、スタイルシートだけで済みますので、楽だと思います。
今後Web制作を続けるのであれば、必ず役に立ちますので、トライしてみてください。
回答有難う御座います。
きちんと長方形に成ってますね・・・画像を入れ込むとダメなんですかね?
まあ、何にせよこの方法だと支障が多いと言う事が分りました。
それだけでもかなりの収穫ですし、今後のWeb活動に活かしていけると思います。
仰られる通り、今後の事も考えて、時間はかかろうともスタイルシートに挑戦してみようと思います。
アドバイス、有難う御座いました。
No.4ベストアンサー
- 回答日時:
>と言われて居られますが、これは画像を背景画像として読み込み、
>その上にリンクを配置させるという認識でよろしいのでしょうか?
>その場合、リンクボタンの位置を調整したりすることも可能だと思う
>のですが、それはスタイルシートの方で指示するのでしょうか?
そうです。サンプルのHTML部分のソースを見るとお分かりのように、きわめてシンプルで、検索エンジンもナビゲーションリンクだと容易に理解できることは想像に難くないと思います。class名をnavにしているのは、将来のHTML5では、<nav>というナビゲーションリンクリストが導入される予定になっているからです。
<ul id="nav">
<li id="pa1"><a href="p1.html">1ページへ</a></li>
<li id="pa2"><a href="p2.html">2ページへ</a></li>
<li id="pa3"><a href="p3.html">3ページへ</a></li>
</ul>
これをスタイルシートでは、リストでなくブロックに変換して、その背景画像を設定しています。
そして、
・それぞれのリンクもボックスにして、ボーダーをつけています。
・ボーダーはoutsetにしてあるので浮き上がった形
・この背景画像は、上と同じものを位置をボタンの位置(a,b)分左上にずらしていますから表示されるものは、背景のその部分にあるものと同じです。
・このリンクをクリックすると、縁がinsetというくぼんだ縁取りになると同時に、文字自体も右下にずらしています。
・このとき背景もずらしています。
結果的に、画像を貼り付けたボタンがへこんだように見えます。
この方法のよいのは、
★位置や数が増えても画像を切りなおさなくてもよい
任意に変更できます。
★背景画像を変更しても問題ない
そしてなによりも、
★サーチエンジン最適化(SEO)としては万全です。
★スタイルシートが利かない携帯端末はむろん、読み上げブラウザ点字ブラウザも情報を得られる
この回答への補足
お久しぶりです。
あれから、色々やって見たのですが、取り敢えず、今は時間がないと言う事で、上司に凝った物じゃなくて良いからと言われ、分解して居た画像を元に戻し、それをスタイルシートで背景として張り付けるだけに終わりました。
本当は、画像の中にリンクをつけたかったのですが、まあ仕方がないですね。
自分の勉強不足ですし、これからもっと勉強してみようと思います。
補足でお礼と言うのも変ですが、助かりました。
本当に有難う御座います。
回答有難う御座います。
なるほど・・・とても勉強に成ります。
まだまだ分らない事だらけなので、少しづつ挑戦してみようと思います。
前任者が、スライスをして作っていたので、それを真似しなければと、躍起になっていました。
ORUKAさんが仰る方法の方が、色々と便利な事が分りました。
それだけでも、かなりの収穫です。
近日中に挑戦してみようと思います。
また分らない事が出来たら、捕捉で質問させて頂きたいので、閉じないでおきます。よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- HTML・CSS 詳しい方に質問です。 早急に解決したいと思っています。 ポートフォリオをMacBook で作成したと 2 2023/05/12 17:40
- フリーソフト 画像貼り付け、URLに飛べる軽いメモ帳 3 2022/05/12 07:42
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグで画像の繰り返し使用は…
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
WEB上でディレクトリ内の画像を...
-
背景画像をリピートさせない方...
-
gif画像でたまに背景がグレーに...
-
CSS マウスオーバーでテキスト...
-
CSSでの動画のマスク処理
-
フッターの背景に色を指定した...
-
LightBoxの矢印の出し方
-
ひとつの画像をWEBで異なる小さ...
-
before疑似要素で画像を指定し...
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
htmlタグで画像を背景に敷き詰...
-
【至急お助け!】チェックボッ...
-
サファリで背景画像が1ピクセ...
-
下記サイトのトップ画像はどの...
-
【Webサイト】画像が小さく表示...
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報