HTMLで、リンクを設定する場合はリンク先のHTMLファイルの位置を指定する必要がありますし、画像を表示させる場合にはその画像の位置を指定する必要があります。
その記述方法には、「絶対パス」と「相対パス」の2通りの方法があります。
記述に誤りがあると、ページが表示されなかったり、画像が表示されなくなるので注意してください。
また、自分のWEBサイト内で「絶対パス」を指定することもできますが、オフラインで表示できないだけでなく、後でフォルダを移動させることを考えると「相対パス」で指定しておいたほうが良いでしょう。
(移動させた場合は、全ての「絶対パス」で指定した部分を変更する必要がでてきます。)
「絶対パス」「相対パス」のどちらで指定した場合でも、サーバーにアップロードした時点でちゃんと表示されるかどうかを確認してくださいね。
絶対パス
WEBブラウザでページを見たときに、アドレスバーなどに表示される「http://」で始まる形式の指定方法です。
この方法は、一番元になる位置から階層構造を順番にたどって記述する必要があります。
主に、他のサイトにあるページや画像を指定するときに使用します。
では、下図のような構造をしたWEBサイトを例にしてみます。
http://www.hanabi.ne.jp/ |
・・・・1 |
| ├ index.html |
・・・・2 |
| ├ welcome.gif |
・・・・3 |
├ menu |
|
| │├ news.html |
・・・・4 |
│├ data |
|
| ││└ count.txt |
・・・・5 |
│├ icon |
|
| ││└ mini.gif |
・・・・6 |
|
【1】を指定するときは、http://www.hanabi.ne.jp/ となります。
【2】を指定するときは、http://www.hanabi.ne.jp/index.html となります。
【4】を指定するときは、http://www.hanabi.ne.jp/menu/news.html となります。
【5】を指定するときは、http://www.hanabi.ne.jp/menu/data/count.txt となります。
相対パス
同じサイト内で参照するときや、自分でホームページを作成している場合などは、こちらの方法で指定します。
この方法は、基準となるファイルから、参照の対象となるファイルが、どの階層の位置にあるかを記述します。
基準となるファイルから下の階層にあるファイルの場合は、そのディレクトリ名からファイル名までを順に「
/」で区切って記述していき、上の階層にあるファイルの場合は、ひとつ上を示すごとに「
../」を付けて指定します。
では、下図のような構造をしたWEBサイトを例にしてみます。
http://www.hanabi.ne.jp/ |
・・・・1 |
| ├ index.html |
・・・・2 |
| ├ welcome.gif |
・・・・3 |
├ menu |
|
| │├ news.html |
・・・・4 |
│├ data |
|
| ││└ count.txt |
・・・・5 |
│├ icon |
|
| ││└ mini.gif |
・・・・6 |
|
基準となるファイルが【2】で、参照するファイルが【3】のときは、welcome.gifとなります。 …(A)
基準となるファイルが【2】で、参照するファイルが【4】のときは、menu/news.htmlとなります。 …(B)
基準となるファイルが【2】で、参照するファイルが【5】のときは、menu/data/count.txtとなります。 …(C)
基準となるファイルが【5】で、参照するファイルが【4】のときは、../news.htmlとなります。 …(D)
基準となるファイルが【5】で、参照するファイルが【2】のときは、../../index.htmlとなります。 …(E)
基準となるファイルが【5】で、参照するファイルが【6】のときは、../icon/mini.gifとなります。 …(F)
相対パスの指定方法をまとめてみました。
※ 同じ階層(ディレクトリ)のファイルを指定する場合…(A)
ファイル名 |
※ ひとつ下の階層(同じ階層にあるディレクトリ内)のファイルを指定する場合…(B)
ディレクトリ名/ファイル名 |
※ ふたつ下の階層のファイルを指定する場合…(C)
ディレクトリ名/ディレクトリ名/ファイル名 |
※ ひとつ上の階層のファイルを指定する場合…(D)
../ファイル名 |
※ ふたつ上の階層のファイルを指定する場合…(E)
../../ファイル名 |
※ ひとつ上の階層の別ディレクトリのファイルを指定する場合…(F)
../ディレクトリ名/ファイル名 |
|