html/cssでのコーディングを始めると、【相対パス】の書き方についてつまづくと思います。
そんな方のために分かりやすく解説したいと思います。
目次
相対パスとは「今いる位置」からの住所
手紙を送るように想定しましょう。
送り先：新潟県三条市本町３丁目５−２５
だとして・・・
今自分が【新潟県】の郵便局にいる場合、ハガキに書く住所は
三条市本町３丁目５−２５
でも届きますよね。
【東京都】の郵便局にいる場合、ハガキに書く住所は
新潟県三条市本町３丁目５−２５
と書く人が多いです。
【アメリカ】にいる場合、ハガキに書く住所は
日本・新潟県三条市本町３丁目５−２５
ですね。
国名から書かないといけません。
このように、今いる位置からの住所を正しく書かないと手紙が届かないように、htmlやcssもパス（住所）を正しく書かないといけません。
htmlに画像を記述する時のパス
<img src="今htmlがある場所から、画像にたどりつくまでの住所を書く" alt="画像の説明文を記入">相対パスの書き方例 1
index.htmlに画像を表示させるという想定でパスを書きます。
この画像の場合、今いる位置（index.html）と同じ階層に画像があります。
<img src="ここに相対パスを記入" alt="画像の説明文を記入">
↓↓
<img src="mainimage.jpg" alt="画像の説明文を記入">これは簡単ですね。
相対パスの書き方例 2
index.htmlに画像を表示させるという想定でパスを書きます。
この画像の場合、今いる位置（index.html）から考えると
1から２に移動すると、画像にたどり着きます。
imagesフォルダ→mainimage.jpg
という住所になりますね。
相対パスを書く場合、住所の区切りを【 / 】で書きます。
<img src="ここに相対パスを記入" alt="画像の説明文を記入">
↓
<img src="imagesフォルダ→mainimage.jpg" alt="画像の説明文を記入">
↓
<img src="images/mainimage.jpg" alt="画像の説明文を記入">という書き方が正しいです。
相対パスの書き方例 3
index.htmlに画像を表示させるという想定でパスを書きます。
この画像の場合、相対パスの書き方例2を基に考えるともうお分かりかと思います。
<img src="ここに相対パスを記入" alt="画像の説明文を記入">
↓
<img src="imagesフォルダ→topフォルダ→mainimage.jpg" alt="画像の説明文を記入">
↓
<img src="images/top/mainimage.jpg" alt="画像の説明文を記入">相対パスの書き方例 4
index.htmlに画像を表示させるという想定でパスを書きます。
一番難しいですが、よく使う書き方です。
index.htmlから、画像にたどり着くまでの住所を考えます。
今自分がいる位置は→2 ですね。
画像の住所に行くには
1つ上階層（1）のフォルダに戻る→imagesフォルダ→mainimage.jpg
住所の区切りを【 / 】で書きますが、
1つ上のフォルダに戻る は【 ../ 】と記述します。
<img src="ここに相対パスを記入" alt="画像の説明文を記入">
↓
<img src="1つ上階層（1）のフォルダに戻る→imagesフォルダ→mainimage.jpg" alt="画像の説明文を記入">
↓
<img src="../images/mainimage.jpg" alt="画像の説明文を記入">../ の理解さえ分かれば、どんな位置にあっても相対パスが書けるようになりますよ。
何度も練習してやってみましょう！
