ホームページ作成で、ページや画像をリンクするときのURL（パス）についてお話します。
URLのパスには大きく分けて「絶対パス」と「相対パス」があり、その２つの中間的な位置付けになる「ルートパス」もあります（ルートパスは絶対パスに近いです）。
これら3つのパスでリンクを付ける際の違いと、それぞれの利点について書いていきます。サイトを引っ越して移転するときはリンクの修正が必要になるので重要な内容です。
絶対パス・相対パス・ルートパスの説明で、ホームページスペースに置いてある「サンプルサイト」の階層です。
サンプルサイトの階層
- /（http://www.geocities.jp/coron032sub/）
- img（画像置き場）
- haikei.jpg
- page1.png
- css（css置き場）
- style.css
- html（トップページ以外のHTML置き場）
- page1.html
- index.html
- img（画像置き場）
フォルダは画像ファイルやCSSファイルなど分けて管理してます。
「index.html」「page1.html」から「style.css」を読み込むときの絶対パス・相対パス・ルートパスの違いについて説明します。他のページへのリンクの貼り方も、考え方は同じです。
絶対パス
絶対パスで「page1.html」で「style.css」を読み込むパスは
- /（http://www.geocities.jp/coron032sub/）
- css（css置き場）
- style.css
- html（トップページ以外のHTML置き場）
- page1.html
- css（css置き場）
http://www.geocities.jp/coron032sub/css/style.css
こうなります。
サイトドメインの「http://www.geocities.jp/coron032sub/」が必ず付きます。
絶対パスのイメージ
サイトドメインから読み込むので、htmlファイルがどこの階層にあっても同じ画像（CSS）を読み込むURLは変わらない。
「index.html」から「style.css」を読み込む場合もパスも同じ。
- /（http://www.geocities.jp/coron032sub/）
- css
- style.css
- index.html
- css
http://www.geocities.jp/coron032sub/css/style.css
利点
- リンクやパスが分かりやすい
- 異なる階層でも同じファイルのリンクは同じになる
欠点
- ローカル環境でブラウザ上から確認が出来ない
- サイト移転してドメインが変わるとURLの修正が必要
相対パス
相対パスで「page1.html」から「style.css」を読み込むパスは
- /（http://www.geocities.jp/coron032sub/）
- css
- style.css
- html
- page1.html
- css
../css/style.css
「../」は1つ上の階層を指します。
相対パスのイメージ
1度「coron032」の階層に戻ってから「css」階層にある「style.css」を読み込む。
「index.html」から「style.css」を読み込む場合
- /（http://www.geocities.jp/coron032sub/）
- css
- style.css
- index.html
- css
./css/style.css
「./」はその階層からと言う意味。階層が変わるとパスも変わります。
今いるディレクトリから移動してファイルを読み込むのが相対パスです。
利点
- ローカル環境でブラウザ上から確認が出来る
- サイト移転でドメインが変わってもパスを修正しなくて良い
欠点
- 階層が変わると同じファイルのリンクでもURLが変わる
- 階層が深くなると複雑になり「../」が多くて分かり難い
ルートパス
絶対パスと相対パスと違い少し特殊なのがルートパスです。
ジオシティーズはサブディレクトリ型なので、当サイトのURL（hp-space.coronblog.net）でお話しします。
ルートパスで「page1.html」で「style.css」を読み込みは
- /（http://hp-space.coronblog.net/）
- css（css置き場）
- style.css
- html（トップページ以外のHTML置き場）
- page1.html
- css（css置き場）
/css/style.css
こうなります。
ルートパスのイメージ
絶対パスと似ていますが、サイトの「ルートディレクトリ」から読み込むので、ドメインが変わってもパスを修正する必要はありません。
サブドメインや独自ドメインのサイトだと使えますが、ジオシティーズのようなサブディレクトリ型の場合は使えません。
サブディレクトリ型でリンクを同じような「/css/style.css」にすると
「http://www.geocities.jp/css/style.css」にアクセスするので、リンク先が異なりファイルの読み込みや表示が出来ません。
サブディレクトリ型はリンクを「/coron032sub/css/style.css」のようにID部分を入れることで、表示されますが、サイト移転でURLが変わると絶対パスと同様にリンクの修正が必要になります。
独自ドメイン・サブドメイン→サブディレクトリに引っ越す場合もリンクの修正が必要です。
利点
- 引越しでドメインが変わってもパスの修正をする必要が無い
- 絶対パスに近いのでパスが分かりやすい
欠点
- サブディレクトリ型サイトでは使えない
- ローカル環境でブラウザから確認が出来ない
サイト移転（引越し）の場合はローカル環境でリンクの修正を
サイトを移転する場合、特に絶対パスではリンクの修正が必要になります。
相対パスだと引っ越しの際にリンクの修正が無くて済むのですが、階層が深くなると複雑になるので、自分がかりしやすいと思う方法で行いましょう。
