【HTML/CSS】絶対パスと相対パス

こんにちは。駆け出しエンジニアの竹前です。

ここでは、絶対パス・相対パスの違いと相対パスの使い方について説明します。

HTMLについて勉強している方の参考になれば幸いです。

絶対パスと相対パス

パスとは

パス(path)とは、英語で「道筋」という意味であり、目的のファイルやディレクトリの位置を示す経路のことをいいます。

HTMLで画像等を表示させるには、表示させたいファイルのファイル名と格納場所を指定する必要があります。

HTMLではファイルの位置を示す方法が2種類あり、それぞれ「絶対パス」と「相対パス」と呼びます。

絶対パスとは

絶対パスとは、最上位のディレクトリ(ルートディレクトリ)から、目的のファイルまでの経路を全て記述する方法です。

具体的には、以下のように記述します。

http://sample.com/images/001.png

絶対パスのメリットとデメリット

メリット

• ファイルの位置を変更してもリンク切れを起こしにくい
• 最上位のディレクトリから目的のファイルまでの位置をすべて記載するので、ファイルの位置が分かりやすい

デメリット

• 文字数が多くなるのでソースコードが見づらくなる
• ドメインを変更した場合、リンクをすべて修正しなければならない
• Webサーバ上のURLを記載するため、Webサイトのファイルをサーバにアップしている必要があり、ローカル環境ではテストできない

相対パスとは

相対パスとは、特定のファイルの現在位置から、目的のファイルまでの経路を記述する方法です。

具体的には、以下のように記述します。

/images/001.png

相対パスのメリットとデメリット

メリット

• ソースコードの記述が短くなる
• ドメインを変更してもリンクを修正する必要がない
• ローカル環境でもテストができる

デメリット

• ファイルの位置を変更するとリンク切れを起こしやすい
• ファイル構造が複雑になるとファイルの位置が分かりにくい

相対パスの使い方

それでは、相対パスの使い方について説明します。

ディレクトリ構成は以下の通りです。

sample.com
  ├─index.html
  │
  ├─images
  │  ├001.png
  │  └002.png
  │
  └─abc
     └sample.html

index.htmlから001.pngを指定する

<img src="images/001.png">

index.htmlから見て、001.pngは一つ下の階層にあります。

この場合、対象のファイルが入っているディレクトリ名とファイル名を指定します。

また、現在のディレクトリを示す「./」を入れてから、対象のファイルが入っているディレクトリ名とファイル名を指定する方法もあります。

「./」を入れるサンプルは以下の通りです。

<img src="./images/001.png">

sample.htmlから002.pngを指定する

<img src="../images/002.png">

sample.htmlから見て、002.pngは1つ上の階層にあるimageディレクトリに含まれています。

この場合、1つ上のディレクトリに上がることを示す「../」を入れ、その後、対象のファイルが入っているディレクトリ名とファイル名を指定します。

今回の例は、1つ上のディレクトリの場合でしたが、2つ上の場合は「../../」となり、1つ上のディレクトリに上がるごとに「../」を付け加えます。