【HTML初心者】画像が表示されないのはパスが原因だった！？絶対パスと相対パスを徹底解説

「なぜか画像が表示されない…」

プログラミングの学習やWeb制作をしていて、一度はそのようなトラブルに直面したことがあるでしょう。

imgタグに指定した画像が表示されない原因の多くは「パス」です。

パスと言っても1つではなく、「絶対パス」と「相対パス」があるので、難しいと感じる方も多いでしょう。

そこで今回は、「絶対パス」と「相対パス」の違いや画像が表示されない主な原因などを徹底解説します。

この記事を読んでわかる内容は以下の通りです。

パスの種類や違いを理解することは、プログラミングを学ぶ上での基本です。

それぞれをしっかり理解できていれば、「画像が表示されない！」などというトラブルもすぐに解決できるようになりますよ。

パスとは？

「絶対パス」や「相対パス」について解説する前に、まずは「パス」そのものについて理解しておきましょう。

そもそもパスとは、今いるファイルの場所から特定のファイルの場所までの道筋を記述した「ファイルの地図」のようなものです。

ではなぜ、パスを書く必要があるのでしょうか？

それは、コンピューターにファイルのある場所を伝えるためです。

コンピューターは、画像の名称や「○○.png」などのファイル形式を理解することができます。

しかし、「〇〇ファイルの中にある▼▼.pngの画像を表示して」と丁寧に伝えてあげなければ、画像が入っているファイルを見つけ出すことができないのです。

例えば、以下の場合

<img src="img/test_img.png">

「imgというファイルに入っているtest_img.pngというPNG画像ファイルを表示して」という意味を伝えていることになります。

絶対パスとは？

絶対パスとは、サーバー上にあるファイルの場所を示す住所のことで、サイトが削除されない限り絶対に変わることはありません。

具体的には、以下のように記述します。

<a href="https://web-camp.io/magazine/">WEBCAMP MEDIA公式ページ</a>

私たちが、普段「URL」と呼んでいるのが絶対パスということです。

主に、aタグなどでリンクを指定する時に使用されますが、サーバー上にアップロードされている画像ファイルなども指定可能です。

1文字でも間違えてしまうと、表示されない、違うページや画像が表示されてしまう、などの問題が発生するので注意しましょう。

絶対パスのメリット・デメリット

絶対パスには、他にも、以下のようなメリットやデメリットがあります。

【メリット】

【デメリット】

絶対パスの使い方

では実際に、絶対パスを使って画像ファイルを読み込んでみましょう！

今回は、以下の条件にある画像ファイルをHTMLで読み込み、表示させる指定をします。

<img src="https://test.com/img/sample.jpg">

<a href="https://www.company.com/profile.html">株式会社パス</a>

相対パスとは？

相対パスは、「読み込みたいファイル」が、「今いるページ（表示したいページ）から見てどこに」あるのか？を示した地図のようなものです。

読み込みたいファイルが、上のフォルダにある場合には、「../」という「階層を示す」記号が必要になります。

具体的には、以下のように記述します。

<img src="../img/test_img.png">

相対パスのメリット・デメリット

【メリット】

【デメリット】

相対パスの使い方

では実際に、相対パスを使って画像ファイルを読み込んでみましょう！

今回は、以下の条件にある画像ファイルをHTMLで読み込み、表示させる指定をします。

<!-- 画像ファイル「sample.jpg」を表示する場合 -->
<img src="img/sample.jpg">

<!-- 画像ファイル「img1.jpg」を表示する場合 -->
<img src="img/img1.jpg">

<!-- 画像ファイル「img2.jpg」を表示する場合 -->
<img src="img/img2.jpg">

階層とは？

相対パスを使用する上で、必ず指定する「階層」について詳しく正しく理解しておく必要があります。

階層とは、フォルダの中にあるフォルダなど、入れ子式に積み重なっているフォルダのことで、どのぐらいの深さにあるものかを示すことができます。

一つ上の階層を指定する場合は「../」、同一階層の同一フォルダを指定する場合には「./」を指定します。

「なぜか画像が表示されない」のはパスが原因かも！

画像が表示されない原因として最も多いのが「パスの記述ミス」。

画像がどこにあるのかを示すパスが間違っていれば、コンピューターはたどり着くことができません。

もしも、画像が表示されないというトラブルが発生した場合は、以下の内容に誤りがないか確認しましょう。

【絶対パスの場合】

【相対パスの場合】

様々な階層にある画像を相対パスを使って表示させてみよう！

では、実際に相対パスを使用して画像ファイルを表示させてみましょう！

今回は、以下のディレクトリ構造を例として使用します。

同じ階層に画像がある場合

上記の例の、「index.html（トップページ）」で「cat.jpg」という画像ファイルを表示させたい場合、以下のように記述します。

<!-- index.html（トップページ）内 -->
<img src="img/cat.jpg">

cat.jpgは、index.htmlからみて「同じ②の階層にある」imgフォルダの中にあります。

基準するindex.htmlと同じ階層であれば「../」などの記号を記述する必要はありません。

1つ上の階層に画像がある場合

上記の例の、「dog.html」ページで「dog.jpg」という画像ファイルを表示させたい場合、 以下のように記述します。

<!-- dog.htmlページ内 -->
<img src="../img/dog.jpg">

dog.jpgは、dog.htmlからみて「1つ上の②の階層にある」imgフォルダの中にあります。

そのため、1つ上の階層であることを示す「../」を指定します。

2つ上の階層に画像がある場合

上記の例の、 「goods_dog.html」ページで「dog_food.jpg」という画像ファイルを表示させたい場合 、 以下のように記述します。

<!-- goods_dog.htmlページ内 -->
<img src="../../img/dog_food.jpg">

dog_food.jpgは、 goods_dog.html からみて「2つ上の②の階層にある」imgフォルダの中にあります。

そのため、2つ上の階層であることを示す「../../」を指定します。

このように、階層が増えるごとにつれ「../」の数が増えていきます。

「./」と「../」の違い

「./」を使用して、画像ファイルがある階層を示すこともあります。

これは「同じ階層」という意味になるので、わざわざ記述しなくても問題ありません。

また、表示させたい画像ファイルが下層にある場合は、現在地から目的のファイルまでの道順を順序通りに記述してあげればいいだけなので、「./」や「../」などの記号を記述する必要はありません。

フォルダ名（ディレクトリ名）の決め方

ホームページやサービスなどの開発をする場合には、複数のHTML・CSSなどのファイルが必要になります。

この時、「index.html」「index2.html」…

などのように数字でファイル名を決めたり、適当に決めるのは現実的ではありません。

また、同様にディレクトリ名も、誰が見てもわかるような名称を付けるのが一般的です。

例えば、会社のホームページを作成した場合、以下のようなファイル・ディレクトリ名が想定されます。

（番号は階層番号です）

絶対パスで「②－2　会社概要ページ」を表示させたい場合は、以下のように記述します。

<a href="https://www.***.co.jp/company/profile.html">株式会社○○ 会社概要ページ</a>

絶対パス・相対パスを使いこなしてHTMLのリンクと画像表示をマスターしよう！

今回は、絶対パスと相対パスの基礎知識と具体的な使い方について解説しました。

以下は、この記事のまとめです。

画像ファイルが表示されない時には、一度パスに誤りがないか確認するのがおすすめです。

絶対パスと相対パスの違いや、使い方をマスターして、HTML初心者を卒業しましょう！

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！