しろばこ舎の渡辺です。
ウェブサイト制作や更新、初学者向けの講師業を行なっています。

HTMLで画像が表示されない

「画像を入れたのに、なぜか表示されない……」
ウェブ制作に挑戦している方が、初期につまづきがちなポイントです。
イラッとしますよね。

ファイルパスは合ってる？

まず、HTMLに書いたファイルパスと、実際のファイル名が合っているか確認しましょう。

ファイルを読み込むときは、
・HTMLに書いたパス（src属性の値）
・実際のファイルの場所、ファイル名
この2つが一致していないといけません。

よくあるミス

・フォルダの場所が違う
・ファイル名のスペルが違う（大文字小文字を含む）
・拡張子が違う（.jpg、.png　など）

「HTMLで画像が表示されない」の解決方法

次の順番で確認してみましょう。
①ファイルパスが正しいか
②実際のファイル名と一致しているか
③拡張子が合っているか

この考え方は、ほかにも使えます

この考え方は、img要素だけではなく
・リンク（a要素）のジャンプ先を指定するとき
・CSSやJavaScriptなど外部ファイルの読み込み
などにも共通します。

ファイルパスの書き方

相対パス
いま編集しているファイルから見て、目的のファイルまでの道のりを書く

絶対パス
サーバー上の位置を基準にした書き方

HTMLを書くときは、基本的には相対パスを使います。

HTMLのルールを覚えることがオススメです

画像が表示されないときは、まず「ファイルパスとファイル名」を疑ってみましょう。
このルールを最初に覚えておくと、制作がスムーズに進みます。

ホームページ管理のこと、「誰かに相談したい！」と思ったら

しろばこ舎では、ホームページ更新作業のご相談をお受けしています。
どうぞお気軽にお問い合わせください。