パス

リンクや画像を正しく表示するには、対象ファイルの場所を「パス」で指定します。このLessonでは絶対URLと相対パスを使い分けます。

このLessonのゴール

• 絶対URLと相対パスを使い分けられる
• 現在のファイルを基準に参照先をたどれる
• パスの間違いをフォルダ構成から調べられる

最終制作物とのつながり

店舗サイトのHTMLから、CSS、JavaScript、画像、別ページを正しく読み込めるようにします。

絶対URL

プロトコルから始まる完全なURLです。主に別のWebサイトへリンクするときに使います。

<a href="https://developer.mozilla.org/ja/">MDNを開く</a>

相対パス

現在のHTMLファイルを基準に、同じサイト内のファイル位置を示します。

project/
├── index.html
├── company/
│   └── index.html
└── images/
    └── logo.svg

トップページから会社ページと画像を参照する場合は次のように書きます。

<a href="company/index.html">会社情報</a>
<img src="images/logo.svg" alt="サイトロゴ" />

会社ページから1つ上の階層へ戻る場合は、../ を使います。

<a href="../index.html">トップへ戻る</a>
<img src="../images/logo.svg" alt="サイトロゴ" />

記述	意味
file.html	同じフォルダのファイル
images/photo.jpg	下のフォルダにあるファイル
../index.html	1つ上のフォルダにあるファイル
/images/photo.jpg	サイトのルートを基準にしたパス

よくあるエラー

• ファイル名の大文字と小文字が一致していない
• ../ の数が足りない、または多い
• 拡張子を書き忘れている
• Windowsの区切り文字 \ を使っている

本番サーバーでは Logo.svg と logo.svg が別ファイルとして扱われることがあります。ファイル名は英小文字で統一しましょう。

実際に試してみよう

practice-siteにabout/index.htmlを追加してください。トップページから店舗紹介ページへ移動し、店舗紹介ページからトップへ戻るリンクを作ります。さらにimages/へ画像を1枚置き、両方のページから表示してください。

完了条件

• トップページと店舗紹介ページを相互に移動できる
• 両方のページでimages/内の画像が表示される
• デベロッパーツールにファイル取得のエラーが出ていない

まとめ

相対パスは現在のファイル位置を基準に考えます。フォルダ構成を見ながら、同じ階層、下の階層、上の階層の順に参照先をたどりましょう。