本ページはプロモーションが含まれています

【初心者向け】画像の絶対パスと相対パスの違いをわかりやすく解説！

2025年11月20日

Web制作をしていると、突然こんな経験をすることがあります。 「昨日まで表示されていた画像が今日見ると消えている…」 実はこれ、絶対パスと相対パスの違いを理解していないことが原因で起こることがほとんどです。
初心者によくあるトラブル例：
  • ローカルでは表示されるが本番で消える
  • WordPressテーマで画像が読み込めない
  • フォルダを移動したらリンク切れ
 
この記事では、絶対パスと相対パスの違いを図解や実例付きでわかりやすく解説します。 理解すれば、もう画像表示トラブルに悩まされることはありません。
この記事で学べること
  • 絶対パスと相対パスの基本的な違い
  • HTMLとWordPressでの正しい使い方
  • よくあるトラブルとその解決法
  • フォルダ構造とパスの整理方法
 

絶対パスとは？ 【どこからでもアクセスできる“完全な住所”】

絶対パス（absolute path）は、URLを完全に書くパスです。 インターネット上の「正確な住所」を指定するイメージです。
HTML例： 
<img src="https://example.com/images/sample.jpg" alt="絶対パス 相対パス 違いのサンプル画像">
 

絶対パスのメリット

  • どこからでも画像を表示できる
  • 外部サイトやCDNからも利用可能
  • OGPやHTMLメールでは必須

絶対パスの注意点

  • URLが変わると修正が必要
  • ローカル環境では確認がやや面倒

相対パスとは？
【“今いる場所から見た”画像の住所】

相対パスのイメージ図

相対パス（relative path）は、現在のファイルから見た位置関係で書くパスです。

たとえるなら、「今いる部屋から見て、隣の部屋なのか、一つ外の廊下なのか」を伝える方法です。フォルダ構造を理解していれば、ローカル環境でも本番環境でも安定して動作します。

HTMLの書き方例： 
<img src="../images/sample.jpg" alt="サンプル画像">

【重要】相対パスで使う「記号」のルール

相対パスを攻略するコツは、たった2つの記号を覚えるだけです！これをマンションの移動に例えてみましょう。

記号 意味（マンションに例えると）
./ 「同じ階層」
いま、僕がいるこの部屋の中にあるよ。
<img src="./photo.jpg" alt="説明">
HTML_CSS
├─ current_page.html
└─ photo.jpg
../ 「一つ上の階層」
一度廊下に出て、外のフォルダ（上の階層）へ行くよ。
<img src="../photo.jpg" alt="説明">
HTML_CSS
├─ index
│　　　└─ current_page.html
└─ photo.jpg

相対パスのメリット

  • ローカル開発で便利：ネットに繋がっていなくても、自分のPC内で画像が表示される
  • サーバー移転に強い：ドメイン名が変わっても、フォルダの関係性が同じならリンクが壊れない
  • WordPressテーマ制作と相性が良い：自作テーマ内で画像ファイルを呼び出す時に必須の知識！

相対パスの注意点

  • フォルダを移動するとリンク切れが発生：ファイルを移動した瞬間に「道順（パス）」が変わってしまうため
  • 外部サービスからは参照できない：自分のサーバー内だけの「道案内」なので、他人のサイトには通じない
💡初心者がやりがちなミス
「画像が表示されない！」という原因のほとんどは、この ../（一つ上に戻る）の数が足りないか、多すぎるかのどちらかです。

絶対パスと相対パスの比較

項目 絶対パス 相対パス
書き方 https://〜 ../images/〜
移転に強い？ × URL変更でNG ○ フォルダ構造が同じならOK
外部画像 ○ ×
ローカルでの扱いやすさ △ ◎
OGP・メール ◎ 必須 ×

よくある失敗例

  • 相対パスを使ったままフォルダを移動してリンク切れ
  • 絶対パスのURLを変更したのに修正を忘れる
  • WordPressでURL直書きしてしまう
  • ローカルと本番でディレクトリ構造が異なる
対策： ファイルの位置とパスの関係を意識すること。 WordPressなら get_template_directory_uri() を活用すると便利です。  

まとめ：どちらを使うべきか

  • SNS・HTMLメール・外部サービス → 絶対パス
  • ローカル開発・WordPressテーマ内 → 相対パス
絶対パスと相対パスの理解で、画像表示トラブルが激減します。
あなたの制作環境に合わせて使い分けましょう。
迷ったらこれ！
✔ SNS・メール → 絶対パス
✔ サイト内完結・WordPress → 相対パス  
関連記事：WordPressでの画像管理方法
関連記事：初心者向けHTML入門

一覧へ!