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="絶対パス 相対パス 違いのサンプル画像">
相対パスのメリット
- ローカル開発で便利
- サーバー移転にも強い
- WordPressテーマ制作と相性が良い
相対パスの注意点
- フォルダを移動するとリンク切れが発生する
- 外部サービスからの参照はできない
絶対パスと相対パスの比較
| 項目 | 絶対パス | 相対パス |
|---|---|---|
| 書き方 | https://〜 | ../images/〜 |
| 移転に強い？ | × URL変更でNG | ○ フォルダ構造が同じならOK |
| 外部画像 | ○ | × |
| ローカルでの扱いやすさ | △ | ◎ |
| OGP・メール | ◎ 必須 | × |
よくある失敗例
- 相対パスを使ったままフォルダを移動してリンク切れ
- 絶対パスのURLを変更したのに修正を忘れる
- WordPressでURL直書きしてしまう
- ローカルと本番でディレクトリ構造が異なる
対策： ファイルの位置とパスの関係を意識すること。 WordPressなら get_template_directory_uri() を活用すると便利です。
まとめ：どちらを使うべきか
- SNS・HTMLメール・外部サービス → 絶対パス
- ローカル開発・WordPressテーマ内 → 相対パス
絶対パスと相対パスの理解で、画像表示トラブルが激減します。
あなたの制作環境に合わせて使い分けましょう。
迷ったらこれ！
✔ SNS・メール → 絶対パス
✔ サイト内完結・WordPress → 相対パス
関連記事：WordPressでの画像管理方法
関連記事：初心者向けHTML入門
