画像が表示されない？HTMLで画像を表示するための階層の話
HTMLで画像を配置したけどブラウザで表示されない！というときはファイルのパス（ファイルの場所・名前）を間違えている場合があります。
テキストエディタの種類によってはエディタの機能を使って画像を挿入することも可能ですが理解していた方がいろいろ良いこともあろうかと記事にまとめました。
画像ファイルだけでなく、ページのリンクやCSS・JSファイルのリンクも考え方は同じです。
目次
- サイトに必要なファイルはフォルダに分けて管理
- HTMLに画像を表示させる
- 一つ上の階層に戻るには
- フォルダ・ファイル名の間違いにも注意
- ファイルのパスは絶対合っているのに画像が表示されない
- まとめ
Advertising
サイトに必要なファイルはフォルダに分けて管理
WebサイトのHTML + CSSコーディングをする場合、一般的には必要なファイルをフォルダに分けて管理すると思います。
例えばこんな感じで。
このフォルダが「階層」になります。「ディレクトリ」と呼んだりもします。
上の画像をMacのFinderで再現すると以下のようなファイル構成になります。
HTMLに画像を表示させる
index.htmlにhero-image.jpgを表示させたい場合はindex.htmlにこのように記述します。
<img src="images/hero-image.jpg" alt="" width="1600" height="1062" >いろいろ属性が書かれていますが、今回の注目ポイントはsrc属性です。
自分（index.html）から見てどこに目的のファイル（hero-image.jpg）があるかが書いてあります。
index.htmlと同じ階層にあるimagesの中のhero-image.jpgファイルということです。
一つ上の階層に戻るには
memer01.htmlにmember01-photo.jpgを表示させたい場合はこのように記述します。
<img src="../images/member01-photo.jpg" alt="" width="600" height="600" >この場合は
自分（memer01.html）が「member」フォルダの中に入っているので画像が入っている「images」フォルダは一つ上の階層と言う位置関係になります。
一つ上の階層に戻るには../と記述します。二つ階層を戻りたいときは../../と2回続けて書けばOKです。
memberフォルダの上の階層のimagesの中のmember01-photo.jpgファイルということです。
フォルダ・ファイル名の間違いにも注意
上記のことを理解して階層の書き方が正しくかけても、フォルダやファイルの名前が間違っていては画像が表示されません。
テキストエディタに入力サポート機能がついていれば、それを利用するのが一番です。そうでない場合はフォルダ・ファイル名をコピー＆ペーストが一番安全だと思います。
ファイルのパスは絶対合っているのに画像が表示されない
フォルダの名前もファイルの名前も合ってる、パスの書き方だって間違ってない！でも画像が表示されない。と言うときは以下の可能性があるかもしれません。
画像のカラーモードがRGBになっていない
画像のカラーモードがRGBになっていない場合。
印刷用に製作したデータを書き出して使用する場合に見られるケースです。
カラーモードをCMYKのままで保存してしまうと正しくパスをかけても表示されません。（途中でレンダリングが止まっているような見た目になることもあります。）
カラーモードをRGBにして保存しなおせば正しく表示されます。
ブラウザのキャッシュが残っている
ローカルのコーディング作業中ではほぼ出会わないケースですが。
ブラウザをリロードするか、キャッシュ削除のプラグインを入れておくと便利です。
プラグイン（Chrome拡張機能）も以前記事にまとめました。
ファイルの拡張子が実際と異なっている
本当はpsdファイルなのに拡張子がjpg・pngなどになってしまっている場合。
psdファイルはブラウザで表示できません。（本当はjpgだけどpng、本当はpngだけどjpgは表示されるようです。）
最近のPhotoshopはファイル名で実際と違う拡張子を指定しても「この書類のファイル名の末尾に“.jpg”という拡張子を使用しています。標準拡張子は“.psd”です。」とダイアログが出るのであまり出会わないケースかもしれません。
ファイルのデータが壊れている
見出しの通りファイルのデータが壊れてしまっている場合。
保存の途中で何かしらの原因でデータが破損してしまうことがあります。
これも最近ではほとんど出会わないケースですが。。。
まとめ
自分がいまどこの階層（フォルダ）にいて、どの階層のファイルをリンクしたいかを確認することが重要です。
Macは初期設定のままではFinderにファイルのパスが表示されないので、設定を変更して表示させておくことをお勧めします。
パスの表示以外にもFinder周り中心の便利な環境設定をまとめた記事もありますのであわせてご覧ください。
