相対パスと絶対パス — 「どこから見た住所か」の違い

パスとは、ファイルの場所を伝える住所のことです。この住所の書き方には2種類あって、どちらを使うかで書き方がまったく変わります。

まず、フォルダの構造を頭に入れる

my-site/
├─ index.html
├─ style.css
├─ images/
│   └─ cat.jpg
└─ pages/
    ├─ about.html
    └─ contact.html

この形を頭に置いて読み進めてください。以下の説明はすべて、この構成が前提です。

相対パス … 「いま自分がいる場所」から数える

相対パスは、そのファイルから見た道順です。人に道を聞かれて「そこの角を右」と答えるのと同じで、自分の位置が基準になります。

• images/cat.jpg … 同じ階層の images フォルダの中の cat.jpg
• ./images/cat.jpg … 上と同じ意味（./ は「いまの場所」で、省略できる）
• ../images/cat.jpg … 1つ上の階層に戻ってから、images の中へ
• ../../ … 2つ上まで戻る

<!-- index.html から書く場合 -->
<img src="images/cat.jpg" alt="猫" />

<!-- pages/about.html から書く場合 -->
<!-- いったん my-site まで戻る必要がある -->
<img src="../images/cat.jpg" alt="猫" />

ここが最大のつまずきポイントです。同じ画像を指しているのに、書いてあるファイルの場所によってパスが変わります。「画像は動かしていないのに、別のページでは出ない」というときは、まずこれを疑ってください。

絶対パス … 「サイトの入り口」から数える

先頭にスラッシュを付けると、サイトのいちばん上から数える書き方になります。自分がどこにいても同じ書き方でよくなるのが利点です。

<!-- どのファイルから書いても、この1行でいい -->
<img src="/images/cat.jpg" alt="猫" />

ただし注意があります。この書き方は「サーバーで公開している状態」を前提にしています。パソコン上のHTMLファイルをダブルクリックで直接開いた場合、パソコンのいちばん上の階層を指してしまい、画像が出ません。

学習中にファイルを直接開いて確認しているなら、相対パスで書くのが確実です。VSCodeの Live Server などを使っていれば、絶対パスも正しく動きます。

http から始まる書き方

もうひとつ、URLをまるごと書く方法もあります。他のサイトのページにリンクするときは、必ずこの形になります。

<a href="https://example.com/page.html">外部サイト</a>

迷ったときの判断

• 同じサイト内で、ファイルを直接開いて確認する … 相対パス
• 同じサイト内で、サーバーやLive Serverを使っている … 絶対パスが楽
• 別のサイト … URLをまるごと書く

パスの間違いを見つける方法

検証ツールのNetworkタブを開いてページを再読み込みすると、読み込みに失敗したファイルが赤い404として表示されます。そこに表示されているパスが、ブラウザが実際に探しに行った場所です。自分が意図した場所と見比べれば、どこで道を間違えたかが分かります。

「なんとなく ../ を足したり消したりする」よりも、この方法のほうが圧倒的に速く解決します。