パス

リンクや画像を正しく表示するには、対象ファイルの場所を「パス」で指定します。この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="サイトロゴ" />

記述	意味