Rewish

ファイルやフォルダの所在を示すパスの種類

HTMLを書く上で基本的かつ重要な知識であるパスについて、再確認のため簡単に書きます。

ここで説明するパスとは、link要素やa要素などのhref属性、img要素やJavaScript外部呼出しのsrc属性などで、ファイルやディレクトリの所在を示す際に用いる文字列の事です。

以下では、 http://example.com/xxx/yyy/zzz/index.html を例に説明します。

相対パス

一般的に広く使われてる指定方法で、指定する側のファイル(例ではindex.html)からの位置を .(ピリオド)と /(スラッシュ)で指定します。

同じディレクトリ(zzz)
./(ピリオド+スラッシュ)または ファイル名のみ(index.html)
一つ前のディレクトリ(yyy)
../(ピリオド+ピリオド+スラッシュ)
二つ以上前のディレクトリ(xxx以上)
../../ ディレクトリ分 ../ を追加

絶対URL

http:// や https:// から始まるURLで指定する。リンクする側(例ではindex.html)の場所に依存しないと言うメリットはありますが、サイトのドメイン自体が変わった場合全てのリンクを入れ替える必要がある。

ルートパス

絶対パスの一種で、ルート(例の場合 http://example.com/ )からのパスを指定します。

基本的な概念は絶対URLと同じですが、ドメインなどに関係なく指定することができるため、ローカルの開発環境でドメインが異なる場合などに便利です。

/
http://example.com/
/xxx/
http://example.com/xxx/
/xxx/yyy/
http://example.com/xxx/yyy/
/xxx/yyy/zzz/index.html
http://example.com/xxx/yyy/zzz/index.html