FireFoxで画像が表示できないのですが

質問

FireFoxで画像が表示できないのですが

初心者ですが、Web画面を製作中に発生した以下の現象で困っておりまして、上級者の方にご教示お願いしたいと存じます。

まず環境は以下の通りです。

OS WindowsXP pro SP3

ここでC:ドライブのフォルダ内にHTML文書とCSSを記述して、IE（8.06)で画面を確認していきながら、満足いく結果を得たので、FireFox(3.6.9)でも確認してみました。
すると、CSSで以下のような記述をした画像データがFFではブラウザ画面に表示されません。

*** { background:url("PC内で画像ファイル格納したフォルダの絶対パス\画像ファイル名.jpg") no repeat; }

そこで、以下の通りHTML内にimgタグで直接記述してみました。
<img src ="PC内で画像ファイル格納したフォルダの絶対パス\画像ファイル名.jpg">

その結果、やはりFFでは画像が表示されず、IEでは期待した通りの画像は表示されました。

そこで、画像のファイルをHTMLを格納したフォルダ内に移して、パスを全て消して以下のように記述しました。
<img src ="画像ファイル名.jpg">

その結果、FFでもIEでも画像が表示されました。

そこでCSSも以下のように書き換えてみました。
*** { background:url("画像ファイル名.jpg") no repeat; }

この結果もFFとIEの両方で画像が表示されました。

ということは、パスを指定した時の私の書き方が問題なのでしょうか？
しかしながら、これはIEのアドレス窓の内容をコピペしただけで、IEでは問題無いので違っているとは思えないのですが。
この事態を打開するには、どう記述したらよいのでしょうか？それともこれはFFの設定の問題でしょうか？

知恵袋の過去問や、Web上の専門サイトは一応探しましたが、こういう事態についての記述は見つけられませんでした。
恐らく、非常に初歩的な質問をしているのだろとは思いすが、早急な解決の必要もあって、申し訳ありませんがごご存知の方からのご教示をお願いできませんでしょうか？

何卒よろしくお願いいたします。

回答No.1

x_lady007 · ベストアンサー

詳細がないので推測ですが絶対パスは下記のように記述しているんでしょうか？
background:url('C:/tmp/www/images/image01.gif');
その場合は下記のように「file:///」を絶対パスの先頭につけてください。
background:url('file:///C:/_tmp/www/images/image01.gif');

しかしながら、Webサイトを作成する際にローカル(PC内)の絶対パスを使用することはありません。
ローカルで確認したいのであれば相対パスを使用するのが普通です。
以下の例の場合、CSSに記述する画像のパスは'../images/画像'となります。
'../'が1つ前のフォルダを意味しています(知ってたらすみません)。

[html]
　┣ index.html
　┣ [css] ━ style.css
　┗ [images] ━ 画像群

※[]はフォルダです。
※[html]などのフォルダ名で関連ファイル一式をまとめてしまうのが一般的です。

お礼

ご回答有難うございます。
お蔭様で、絶対パスの先頭にfile://を付けることで解決しました。
これがモダンブラウザとしての標準なのだということでしょうか。

Webサーバーにアップロードする前に、自分のPCで動作確認をしておりましたが、現在ではブラウザはFFに切り替え、PC内でapacheを立ち上げて、http://localhostでシミュレートできるようにしました。

今回、貴重なアドヴァイスを頂き、大変有難うございました。

回答No.2

grumpy_the_dwarf

> これはIEのアドレス窓の内容をコピペしただけで、

きっとこれが原因ですね。途中に日本語のフォルダ名があるでしょ
う。そこのエンコーディングが不一致と思われます。ルートから
ファイル名まで、あなたのユーザー名を含め一切日本語やアクセン
ト記号を含まない場所を用意して試してみて下さい。

お礼

ご回答有難うございました。
確かに、結果として、この行為も原因でした。日本語名のフォルダはありませんでしたが、IEはうアドレス窓にfile://が無くても動いてしまうのですね。
ご親切感謝いたします。