画像が表示されないと困ったら(HTML初心者の方へ)
「画像が表示されません!どうして???」
HTML初心者の方によく質問をされるんですが、いくつか理由があると思いますが、
一番理由で多いと思われる「ファイルへのパスが合ってない」という件について、なるべくわかりやすく図で解説してみたいと思います。
下記の図は、HTMLファイルと画像が同じ場所(同じ階層)にある場合。

ndex.htmlとspring.jpgは同じ階層なので、imgのタグは(画像ファイルへのパスは)
<img src=”spring.jpg” width=”250″ height=”166″ alt=”リス” />
になっています。
同じ階層ってどういう意味?という方は下記をみてください。

次に、画像が、imageフォルダの中に入っている場合です。

ndex.htmlとspring.jpgは同じ階層ではなく、imageフォルダの中にspring.jpgが入っているので、imgのタグは(画像ファイルへのパスは)
<img src=”image/spring.jpg” width=”250″ height=”166″ alt=”リス” />
となります。
エクスプローラーでみてみると

こうなっています。
ここをミスしていると、ブラウザでプレビューされても画像が×になってしまいどうして???となってしまいます。
ドリームウィーバーCS4を使って、画像を挿入する方法と、画像パスのリンク切れを防ぐ方法を動画マニュアルで紹介してますので、興味のある方はこちらもみてみてください。

初めてDreamweaverを使う [3] 画像の挿入
初めてDreamweaverを使う [4] 画像のパス
ほかにいくつか、画像が表示されない場合の原因を出しておきますね。
- ファイル名に日本語を使ってないか?
- gifかjpgで保存しているか?(PNGでも表示できますが、今回はその話は割愛)
- CMYKで保存してないか?(RGBになっているか?)
- 画像を保存した場所は、サイトの中か?(サイト定義の中)
- HTMLファイルから、画像へのパスは合っているか?
- サーバにアップロードしたときに、画像だけを転送し忘れていないか?
- 画像だけアップして、HTMLの方をアップし忘れていないか?
- キャッシュを見ているだけで、更新ボタンを押したら表示されるということもあるようです。
関連記事
-

-
千畳敷カールで2612体験してきました
10月3日、下界はまだ夏のなごりが残る初秋。この日、中央アルプス駒ケ岳ロープウェイにのって、2612… ≫続きを読む
-

-
【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?
携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも… ≫続きを読む
-

-
【ホームページの作り方】ポータルサイト・情報サイト・コミュニティサイトの作成
ポータルサイト、情報サイトで大事なことは、情報やページ数がどんどん増えていくしくみです。情報が大量に… ≫続きを読む
-

-
メールの反応がない方・・
例えば今期になってから、新しくお仕事をご依頼されたりお客様になっていただいて、新しく知り合った方が6… ≫続きを読む
-

-
シドニー with ホームステイ 体験記
ただいまシドニー郊外にホームステイしながら仕事をしています。 忘れないうちにシドニー・ホームステイの… ≫続きを読む
-

-
【Q】ブログを使ったSEO対策があると聞きました。具体的にどうすればいいですか?
ブログを使ったSEO対策 以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。… ≫続きを読む
-

-
グーグルアナリティクスGA4への切り替え
来年7月1日からGoogle Analytics4への移行があるということで、まだ未設定の場合は下記… ≫続きを読む
-

-
【Q】ドメインの引っ越しについて何からしたら良いかわかりません。具体的には今別会社で管理しているのを私が管理したいのですが・・・
ドメインの移管は何度やってもけっこう大変というか、失敗しないように出来るかちょっと緊張します。 とい… ≫続きを読む
-

-
【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?
リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML… ≫続きを読む
-

-
【Q】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)
SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・… ≫続きを読む


