絶対パスと相対パス

HTMLの属性値や、CSSのプロパティ値に、ハイパーリンクや、画像の表示など、特定のファイルの場所(パス/Paht)を指定することがあります。


絶対パス

絶対パスは、Webサーバや、ローカルディスクの最上位の階層から特定のファイルを指定します。簡単に言えば、Webサーバ(インターネット上)は"http://"からの特定のページ(ファイル)への指定で、ローカルディスクは"c¥"から特定のファイルを指定することです。

例)

<a href="http://example.com/index.html">AAA</a>

インターネット上の特定のWebサイトのトップページへのURLを指定しています。

相対パス

相対パスは、ソースコードを記述するHTMLドキュメントを基準に、特定のファイルを指定します。

例1)

<a href="aaa.html">AAA</a>

同じ階層のフォルダ(HOMEフォルダ)のindex.htmlから、aaa.htmlを指定する場合の記述例です。そのまま"ファイル名.拡張子"を記述します。


例2)

<a href="aaa/example.html">AAA</a>

index.htmlから、aaaフォルダのexample.htmlを指定する場合は、"フォルダ名"に続き、"/(スラッシュ)"を記述し、リンク先の"ファイル名.拡張子"を記述します。


例3)

<a href="../index.html">AAA</a>

aaaフォルダのexample.htmlから、ひとつ上の階層のindex.htmlへのリンク。"..(ピリオド2つ)に続き、"/(スラッシュ)"を記述し、リンク先の"ファイル名.拡張子"を記述します。


One point advice!

../は、"ひとつ上の階層へ"と覚えると良いと思います。

例えば、上の画像のaaaフォルダのなかにbbbフォルダがあり、その中にexample2.htmlがあるとします。example2.htmlから、index.htmlへのリンクを指定する場合のhref属性の属性値は、"../"を2つ記述して、"../../index.html"となります。