パスの設定方法を紹介します。
- 環境とパスの設定について
- HTTP Server経由での相対パスを紹介します（HTTP Serverを経由するのと、しないのでは、結果が異なる場合があります）。
- 通常、HTTP Serverを経由してindex.html、またはindex.htmにアクセスする場合は、ファイル名を省略できます（HTTP Serverの設定による）。
この説明でも、ファイル名を省略します（リンク先（設定）のファイルはすべて「index.html」です）。
- パスを設定するタグは主に、リンク「a（アンカー）」や画像「img」などが代表的なタグで、リンク「a」は「a href="パス"」、画像「img」は「img src="パス"」を設定します。 この説明では、リンク「a（アンカー）」を使い、説明します。「href="パス"」
■ >>> 絶対パス（absolute path）
絶対パスは、他のサイトへリンクを設定する場合に用います。
絶対パスとは、http://から始まるアドレスの事です。
例１
以下はサイトの階層図です。ドメインの中にフォルダ「sasaki」があり、そのsasakiの中にフォルダ「ssk」があり、そのsskの中にフォルダ「ts」があります。
ドメイン（URL：http://www.tmgw.net/）・index.html
|
| href='http://www.tmgw.net/' | 一番上の階層の「index.html」へリンクを設定する場合。 |
| href='http://www.tmgw.net/sasaki/' | フォルダ「sasaki」の「index.html」へリンクを設定する場合。 |
| href='http://www.tmgw.net/sasaki/ssk/' | フォルダ「ssk」の「index.html」へリンクを設定する場合。 |
| href='http://www.tmgw.net/sasaki/ssk/ts/' | フォルダ「ts」の「index.html」へリンクを設定する場合。 |
分からない場合、ブラウザでリンクしたいページを表示します。
その時、アドレスにURLが表示されます。そのURLが絶対パスです。
■ >>> 相対パス（relative path）
相対パスは、サイト内のリンクや画像の表示のときに用います。
[ 注意 ] サイト内では、絶対パスは使用しないのが基本です。
階層（フォルダ）の移動（パスの設定）のしかた。
| / | 一番上の階層へジャンプします。 |
| ./ | 現在の位置を表します（省略可）。 |
| ../ | ひとつ上へ上がります。 |
| フォルダ名/ | そのフォルダの中へ入ります。 |
例１
以下はサイトの階層図です。ドメインの中にフォルダ「sasaki」があり、そのsasakiの中にフォルダ「ssk」があり、そのsskの中にフォルダ「ts」があります。
現在、ブラウザはフォルダ「ts」のindex.htmlを表示しているとします。
この時のURLはhttp://www.tmgw.net/sasaki/ssk/ts/
ドメイン（URL：http://www.tmgw.net/）・index.html
|
| href='./../' href='../' href='/sasaki/ssk/' | フォルダ「ssk」のindex.htmlへリンクを設定する場合 |
| href='./../../' href='../../' href='/sasaki/' | フォルダ「sasaki」のindex.htmlへリンクを設定する場合 |
| href='./../../../' href='../../../' href='/' | 一番上の階層のindex.htmlへリンクを設定する場合 |
例２
現在、ブラウザはフォルダ「sasaki」のindex.htmlを表示しているとします。
この時のURLはhttp://www.tmgw.net/sasaki/
ドメイン（URL：http://www.tmgw.net/）・index.html
|
| href='./../' href='../' href='/' | 一番上の階層のindex.htmlへリンクを設定する場合 |
| href='./ssk/' href='ssk/' href='/sasaki/ssk/' | フォルダ「ssk」のindex.htmlへリンクを設定する場合 |
| href='./ssk/ts/' href='ssk/ts/' href='/sasaki/ssk/ts/' | フォルダ「ts」のindex.htmlへリンクを設定する場合 |