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

公開日: 2025年10月02日

HTMLとCSSを学び始め、自分のWebページに初めて画像を配置しようとした時。あるいは、CSSファイルを別のフォルダに整理した時。多くの学習者が、同じ絶望的な壁にぶつかります。

「画像が表示されない！」「CSSが効かない！」

コードは一行も間違っていないはずなのに、なぜかブラウザには壊れた画像のアイコンが表示される。この問題の原因の9割は、「パスの指定ミス」にあります。 今日は、このWeb開発の最初の関門である「絶対パス」と「相対パス」の違いを、もう二度と迷わないように、完璧に解説します。

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

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

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

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

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

この書き方をすれば、このHTMLファイルが世界のどこにあっても、必ず serch-code-pro.onrender.com というサーバーの、static/images フォルダの中にある logo.png を見つけ出すことができます。

• いつ使うか？: 外部サイトの画像を引用したり、CDN（コンテンツデリバリーネットワーク）上のライブラリを読み込んだりする時に使います。
• メリット: 確実性。ファイルの位置関係が変わっても、リンクが切れることはありません。
• デメリット: URLが長くなる。もし将来、サイトのドメインを変更したら（例: onrender.com から独自ドメインへ）、すべての絶対パスを書き換える必要があります。

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

一方、相対パスとは、「今いるこのファイルから見て、目的のファイルはどっちの方向にあるか」を示す、相対的な道順です。 現実世界で、「そこの角を右に曲がって、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">

もし、ここで static/images/dog.jpg と書いてしまうと、ブラウザは blog/static/images/dog.jpg という、存在しない場所を探しに行ってしまい、画像は表示されません。これこそが、多くの初心者が陥る罠なのです。

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

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

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

相対パスを使いこなせるようになることは、ファイルとフォルダを整理し、メンテナンス性の高いWebサイトを構築するための、必須のスキルです。 もし画像が表示されなかったら、慌てずに、デベロッパーツールの「コンソール」を見てみましょう。「404 Not Found」のエラーが、あなたが間違って指定してしまった「道順」を、きっと教えてくれますよ。