相対パスと絶対パス
リンクを張るときや画像を表示させる時に必要になる知識の1つに「パス」というものがあります。
このページではそのパスについて説明していきます。
パスとは？
パスというのは、そのファイルがどこにあるのかを表す文字列のことです。
Webサイトの場合はURLのことになります。
URLの例としては、Yahoo!Japanの場合はhttp://www.yahoo.co.jp/のことで、Googleの場合はhttp://www.google.co.jp/のことになります。
ブラウザの↓部分に表示されている文字列のことです。
さてここで重要なのは、パスには2種類あるということ。
1つは絶対パス、もう1つは相対パスです。
では、次でそれぞれについて説明してきます。
[事前説明]
以下で出てくる/はフォルダ(ディレクトリ)の区切りという意味です。
たとえば、test/page.htmlという場合はtestフォルダ内のpage.htmlというファイルという意味になります。
Windowsの\と似たような意味と考えればOKかと思います。
絶対パス
絶対パスとは、URLを最初から最後まで全て記述したもののことを言います。
さっき上であげたhttp://www.yahoo.co.jp/やhttp://www.google.co.jp/は絶対パスということになります。
この絶対パスの特徴は、どのページに書いても問題が無いことです。
この絶対パスは、他のサイトやブログへリンクを張るとき、他サイトのバナーを表示する時に主に使います。
相対パス
相対パスは、今書いているWebページから見てファイルがどこにあるかを記述したものです。
ちょっと分かりにくいので、例を示しながら説明していきます。
下のような構成のページがあったとします。
http://www.netgamebm.com/ − index.html
�� about.html
�� bbs − bbs.html
�� link − link.html
作業用フォルダの中にindex.htmlabout.htmlという2つのファイルとbbslinkという2つのフォルダがある。
bbsフォルダの中にはbbs.htmlというファイルが、linkフォルダの中にはlink.htmlというファイルがあるとします。
index.htmlからabout.htmlにリンクを張りたいと思った時。
■絶対パスでは
http://www.netgamebm.com/about.html
と書かないといけません。
■相対パスでは
about.html
とだけ書けばOKなんです。
つまり、index.htmlから見て同じフォルダの中にabout.htmlファイルがありますよということですね。
他のファイルの例も記してみます。
■index.htmlからみたbbs.htmlへの相対パス
bbs/bbs.html
■bbs.htmlからみたabout.htmlへの相対パス
../about.html
ここで出てきたのが../というものです。
これは、1つ上のフォルダ(ディレクトリ)にあるという意味です。
..が1つ上という意味を表しています。
つまりは、1つ上は../、2つ上は../../、3つ上は../../../ってことになります。
このように、相対パスは自分のサイト内のファイルにリンクを張るときに使います。
絶対パスの様に長ーいURLを書かなくて良いし、サイトを引っ越した時に楽なのです。
絶対パスだと、引っ越した時に全てのサイト内へのパスを書き換えなきゃいけなくなるので。
(例えばこのサイトの場合、http://www.netgamebm.com/c/部分がhttp://www.netgamebm.com/ohikkoshi/に変わったら、絶対パスで書かれていたパスは全て書き直さなきゃいけなくなると考えると理解できるかな。)