CSSや画像、Jsファイルが読み込まれない!ってときにチェックしたいポイント

HTML

画像が出てこない!CSSを書いたけど、何も変わらない!
なんで?どこを直したらいいの?って焦ること、ありますよね。
わたしの数多くの失敗や、制作会社時代のWebデザイナーさんの「?」をもとに、ファイルが表示されない際のチェックポイントをまとめてみました。
さっそくですが、チェックするポイントは以下の3つです。

  • ファイルへのパスはあってる?
  • ファイル名はあってる?
  • そもそもフォルダに入ってる?

だいたいはひとつめのファイルへのパスが違うことが原因かなーって思います。
下に詳しく書きましたので、ひとつひとつあってるかな?ってチェックしてみてくださいね。

ファイルへのパスはあってる?

いちばんやりがちなのが、ファイルへのパスを間違うことです。
これは、わたしもそうでしたがWebデザイナーさんがほぼ間違いなく「?」ってなるポイントかなと思ってます。
たとえば、CSSで背景画像を使うときなどの相対パスで書いているときに起きるミスです。

相対パスって?

<img src="img/logo.png">
<img src="http://www.site-name.com/img/logo.png">
ふたつは同じ画像を表していて、上が相対パス、下は絶対パスといいます。
相対パスが<img src="img/logo.png">こうなるときは、こんなフォルダ構成です。

ファイル名はあってる?

ソースコードを表示して、ファイル名で検索をします。
検索したファイル名がない場合はHTMLでのファイル名がちがうかもしれません。

ソースコードの確認

このファイルが読み込まれないっていうのは、HTMLをブラウザで表示させているときに起きますよね。その状態で、ソースコードを確認します。
ブラウザ別のショートカットはこちら。右クリック→ソースを確認でも見られます。

Windowsの場合

FireFox win / Ctrl + U
Google Chrome win / Ctrl + U
Internet Explorer win / Ctrl + U

Macの場合

FireFox Mac / command + U
Google Chrome Mac / option + command + U
Safari Mac / command + option + U

該当ファイル名で検索


ソースコードが表示されたら、表示されないファイル名で検索をします。
検索ショートカットは、windows / Ctrl + F 、Mac / command + F です。

ブラウザによって検索窓が出てくる場所がちがうので、ご注意ください。

  • FireFox / 左下
  • Google Chrome / 右上
  • Internet Explorer / 右上
  • Safari / 右上


ファイル名はありましたか?ない場合は、HTMLを書いた場所を見直し、ファイル名の確認をしましょう。

そもそもフォルダに入ってる?

わたしは、違うフォルダに画像を入れて「表示されない!」って焦っていたことがあります。
画像を保存したはずなのに、フォルダ内が空だったり。いろんなケースがありました。一度フォルダ開いて、ファイルがあるかを確認してみましょう。

まとめ

ファイルが表示されない自体は解決されましたでしょうか。
あらためて、チェックポイントをおさらいします。

  • ファイルへのパスはあってる?
  • ファイル名はあってる?
  • そもそもフォルダに入ってる?

相対パスって慣れないとなんかよくわかんないんですよね。../../../file-name.jpgくらいになると、いまどこ??って思ったりしていました。
でも、慣れちゃえばさくっとミスを直せるようになりますよ!
さきほども言いましたが、FTP(ファイル転送ソフト)でフォルダの構造を見てみると、わかりやすくておすすめです。
では、次回もおつきあいくださいませ。

コメント