【絶対パス vs 相対パス】もう迷わない！画像が表示されない原因と解決策

更新日: 2026年1月11日

プログラミング学習を始めた頃、私は「整理整頓」に目覚めました。 ルートフォルダにごちゃごちゃと置かれていたCSSや画像を、css/ フォルダや images/ フォルダに綺麗に移動させたのです。

「これでスッキリした！」とブラウザをリロードした瞬間、私は絶望しました。 画像はすべて消え、CSSも効かなくなり、サイトがただの文字の羅列になってしまったのです。

原因は、ファイルの場所を変えたのに、HTMLの中の「パス（道順）」を書き換えていなかったから。 今日は、Web開発の最初の関門である「絶対パス」と「相対パス」の違いを、当時の私のような初心者でも二度と迷わないように、完璧に解説します。

パスとは何か？：ファイルへの「道順」

「パス (Path)」とは、単純に言えば、あるファイルから、別のファイルまでの「道順」や「住所」のことです。 index.html が style.css を読み込んだり、<img> タグが dog.jpg を表示したりするためには、この「道順」を正しく教えてあげる必要があります。 そして、この道順の書き方には、2つの主要なスタイルがあります。

絶対パス：世界中の誰もがたどり着ける「絶対的な住所」

絶対パスとは、地球上のどこから見ても、絶対にその場所にたどり着ける、完全な住所のことです。 Webの世界では、これは https:// から始まる、完全なURLを指します。

<!-- 絶対パスの例 -->
<img src="https://serch-code-pro.com/static/images/logo.png">

この書き方をすれば、ファイルの位置関係が変わってもリンク切れは起きません。 しかし、私はこのサイトを作る時に大きな失敗をしました。開発中に `onrender.com`（無料ドメイン）の絶対パスを書いてしまっていたため、独自ドメイン（.com）に移行した瞬間、すべての画像が表示されなくなってしまったのです。

• いつ使うか？: 外部サイトの画像を引用したり、CDN（コンテンツデリバリーネットワーク）上のライブラリを読み込んだりする時に使います。
• 注意点: 自分のサイト内で使うと、ドメイン変更時に地獄を見ます。

相対パス：今いる場所からの「相対的な道順」

一方、相対パスとは、「今いるこのファイルから見て、目的のファイルはどっちの方向にあるか」を示す、相対的な道順です。 現実世界で、「そこの角を右に曲がって、2軒目だよ」と教えるようなものです。

相対パスでは、いくつかの特別な記号を使います。

• ./ (または、何も付けない): 今いる場所（同じ階層）
• ../: 一つ上の階層
• /: ルートディレクトリ（サイトの一番上の階層） ※これは「ルート相対パス」と呼ばれる特殊な相対パスです。

例で学ぶ、相対パスの書き方

あなたのサイトが、以下のようなフォルダ構造になっているとします。

/ (ルート)
├─ index.html
├─ blog/
│  └─ post-1.html
└─ static/
   ├─ style.css
   └─ images/
      └─ dog.jpg

ケース1：index.html から dog.jpg を読み込む

index.html から見ると、dog.jpg は static フォルダの中の images フォルダの中にあります。

<!-- "今いる場所"から、static → images → dog.jpg と進む -->
<img src="static/images/dog.jpg">

ケース2：post-1.html から dog.jpg を読み込む

post-1.html（blogフォルダの中）から見ると、まず一つ上の階層 (../) に戻ってから、static フォルダに進む必要があります。 私が失敗したのはここでした。フォルダの中にいるのに、フォルダの外にあるファイルを取ろうとしていたのです。

<!-- "一つ上"に戻り、そこから static → images → dog.jpg と進む -->
<img src="../static/images/dog.jpg">

まとめ：どちらを、いつ使うべきか？

基本的なルールは、非常にシンプルです。

• 自分のサイト内のファイル（画像、CSS、他のページへのリンク）を読み込む時: 相対パスを使う。（ドメイン変更にも強い！）
• 外部のサイトのファイル（CDNのライブラリなど）を読み込む時: 絶対パスを使う。

もし画像が表示されなかったら、慌てずに、デベロッパーツールの「コンソール」を見てみましょう。「404 Not Found」のエラーが、あなたが間違って指定してしまった「道順」を、きっと教えてくれますよ。