相対パスの書き方（../の使い方）

📝 問題の再掲

Q19: 同じフォルダにある画像 cat.jpg を表示するパスの書き方は？

正答: cat.jpg（同じフォルダならファイル名だけでOK）

⚠️ よくある間違い

• ../ の数を間違える（2階上なのに1つしか書かない）
• / から始めてしまう（これは絶対パス）
• フォルダの階層構造が頭の中でイメージできない

📖 段階的な説明

ステップ1：絶対パスと相対パスの違い

• 絶対パス: 一番上（ルート）からの完全な住所。例: /Users/name/project/images/cat.jpg
• 相対パス: 今いる場所からの道順。例: images/cat.jpg

ステップ2：同じフォルダ → ファイル名だけ

project/
├── index.html  ← 今ここ
└── style.css

→ href="style.css"

ステップ3：下のフォルダ → フォルダ名/ファイル名

project/
├── index.html  ← 今ここ
└── images/
    └── cat.jpg

→ src="images/cat.jpg"

ステップ4：上のフォルダ → ../ファイル名

project/
├── style.css
└── pages/
    └── about.html  ← 今ここ

→ href="../style.css"（1階上に戻ってからstyle.css）

ステップ5：2階上 → ../../

project/
├── images/
│   └── logo.png
└── pages/
    └── blog/
        └── post.html  ← 今ここ

→ src="../../images/logo.png"（2階上→imagesフォルダ→logo.png）

💡 覚え方のコツ

../ は「1階上に戻る階段」

エレベーターで上の階に行くイメージ。../ を1つ書くたびに1階上に戻ります。戻った先から目的のフォルダに入っていきます。

✅ 確認問題

Q: 以下の構造で、about.html から logo.png を指定するパスは？

site/
├── images/
│   └── logo.png
└── pages/
    └── about.html  ← 今ここ