相対パスと絶対パスの違い｜画像やリンクが表示されない原因

相対パスと絶対パスの違いとは

パスとは、HTML の中で「ファイルの場所」を表す書き方です。画像の src、リンクの href、CSS を読み込む <link> の href などに書きます。画像や CSS が表示されないトラブルの多くは、このパスの書き間違いが原因です。

パスには、大きく分けて「相対パス」と「絶対パス」があります。相対パスは今開いている HTML ファイルの場所から見た道順、絶対パスはどこから見ても同じ住所です。この記事では、2つの違いと、表示されないときの確かめ方を、実際にブラウザで表示を確かめた例で説明します。

基本（3種類の書き方）

種類 例 意味
相対パス images/photo.png 今のファイルと同じ場所にある images フォルダの photo.png
相対パス（上へ） ../images/photo.png 1つ上のフォルダに戻ってから images フォルダへ
ルート相対パス /images/photo.png サイトの一番上（ドメインの直下）から見た場所
絶対 URL https://example.com/images/photo.png ドメインまで含めた完全な住所

../ は「1つ上のフォルダへ」という意味で、2つ上なら ../../ と重ねます。MDN の学習ガイドでも、同じ階層は ファイル名、下のフォルダは フォルダ名/ファイル名、上のフォルダは ../ と説明しています。

具体例（フォルダ構成と書き方）

次の構成で考えます。

my-site/
├─ index.html
├─ css/style.css
├─ images/photo.png
└─ blog/
    └─ post.html
どのファイルから 何を 正しい書き方
index.html 画像 images/photo.png
index.html CSS css/style.css
blog/post.html 画像 ../images/photo.png
blog/post.html CSS ../css/style.css
blog/post.html トップへのリンク ../index.html

動作確認（検証環境と結果）

blog/post.html に、次の3つの画像を書いて表示を確かめました（Microsoft Edge、2026年10月）。

<img id="a" src="../images/photo.png" alt="相対パス（1つ上へ）">
<img id="b" src="images/photo.png" alt="間違い：blogフォルダの中を探す">
<img id="c" src="/images/photo.png" alt="ルート相対パス">
開き方 a（../images/） b（images/） c（/images/）
ファイルを直接開く（file://） 表示された 表示されない 表示されない
ローカルのサーバー経由（http://） 表示された 表示されない 表示された

b は、blog フォルダの中に images フォルダを探しに行くため、見つかりません。c のルート相対パスは、サーバー経由では動きますが、ファイルを直接開いたときは「パソコンのドライブの一番上」を基準にしてしまうため、見つかりませんでした。同じページで ../css/style.css の CSS も正しく読み込まれました。

実践のステップ（表示されないときの確かめ方）

  1. 表示されない画像を右クリックし、「画像を新しいタブで開く」などで、ブラウザが探しに行った URL を確かめます。
  2. 開発者ツールの Network タブで、その画像の行が 404（見つからない）になっていないかを見ます。
  3. 今開いている HTML ファイルの場所から、目的のファイルまでの道順を、フォルダを1つずつたどって書き直します。
  4. ファイル名の大文字・小文字、拡張子（.png と .PNG、.jpg と .jpeg）が一致しているかを確かめます。

相対パスと絶対パスの違いの注意点

  • 大文字と小文字は区別されると考える： MDN も、多くのサーバーは大文字と小文字を区別すると説明しています。パソコンでは表示されても、公開すると表示されない原因になります。ファイル名は半角の小文字にそろえます。
  • 空白と日本語のファイル名は避ける： 空白は URL で %20 に置き換わるなど扱いが一定しません。区切りはハイフン（-）を使います。
  • ルート相対パスは置き場所に注意： サイトをドメインの直下ではなくフォルダの中に置くと、/images/ が別の場所を指します。

相対パスと絶対パスの違いでよくあるミス

  • C:Users...photo.png のような、自分のパソコンの場所をそのまま書く（公開すると誰も見られません）。
  • （バックスラッシュ）で区切る。Web のパスの区切りは / です。
  • ファイルを別のフォルダに移したのに、パスを直し忘れる。

相対パスと絶対パスの違いのチェックリスト

  • [ ] 今開いている HTML の場所から道順を書いた
  • [ ] 1つ上のフォルダは ../ で表した
  • [ ] ファイル名を半角小文字・空白なしにそろえた
  • [ ] 開発者ツールで 404 がないことを確かめた

相対パスと絶対パスの違いのFAQ（よくある質問）

Q. 相対パスと絶対パスは、どちらを使えばいいですか？

A. 同じサイトの中のファイルは、相対パスで書くのが基本です。サイトの置き場所が変わっても、フォルダの関係が同じなら動き続けるからです。ほかのサイトへのリンクは、https:// から始まる絶対 URL で書きます。

Q. ./images/photo.png の ./ は何ですか？

A. 「今のフォルダ」という意味で、images/photo.png と同じ場所を指します。

Q. CSS の中の画像のパスは、どこから見た場所ですか？

A. CSS ファイルの中に書いた url() は、HTML ではなく、その CSS ファイルの場所から見た道順で書きます。

筆者の見解（相対パスと絶対パスの違い）

パスの間違いは、初心者が最初にぶつかる壁でありながら、エラーとして目立たないため気づきにくいと感じます。私は「今開いているファイルの場所から、フォルダを指でたどる」習慣と、開発者ツールで 404 を探す習慣の2つがあれば、ほとんどのケースは数分で解決できると考えます。最初からファイル名を半角小文字にそろえておくことが、公開後のトラブルを減らす一番安い対策だと思います。

相対パスと絶対パスの違いの関連項目

出典（一次情報）

タイトルとURLをコピーしました