絶対パスと相対パスに付いて

ホームページ作成に必用な知識、サイト内リンクの絶対パスと相対パスに付いて概念と記述の仕方を説明します。

TopPage > Home > ホームページへの音楽掲載方法 > ホームページ作成に必用な知識、絶対パスと相対パス

サイト内リンクの絶対パスと相対パスに付いて概念と記述の方法。


ホームページ作成において避けて通れないのがサイト内リンクのパス(PATH)の書き方です。
全てのページを同じフォルダ(ディレクトリー)に置けば難しい事は何もありません。
単にファイル名を指定するだけで済みますし、相対パスの知識も必要ありません。
ローカル上ではうまく行ったけどサーバにアップロードしたらリンク切れ、なんて事も起こりません。

サイト内のページ数が少ない場合はファイル名を指定するだけでも済みますが、 ある程度サイト内のページ数が増えてくると、更新などの為にファイルを探すのも厄介になって来ます。
ファイル数が多くなって来た場合、新しくホルダーを作って整理するのが普通の考え方で、正解です。

ホルダーに整理する場合、各ホルダー間をまたぐリンクの相対パス指定方法を知らなければ確実に悲惨な目にあいます。
簡単な事ですから、相対パスの考え方や記述方法をホームページ作成段階から理解しておいても損はありません。

サイト内リンクの絶対パス(PATH)と相対パスに付いて
ある特定のファイルの場所を指し示す方法には絶対パス相対パスを使います。
絶対パス(フルパス)と言うのは、その名の通りURLを先頭からすべて記述した絶対アドレスの事で、 現在地に関係なく、フルパスでアドレスを示します。
当たり前ですが、サイト外部へのリンクやドメインの違うサーバーへのリンクは、常に絶対パスになります。
絶対パスはabsolute pathの事で相対パスはrelative pathです。

絶対PATHの記述例 (ファイルネームがindex.htmlの場合)
http://www.xxxxx.ne.jp/dir1/dir2/index.html

絶対パスで記述するのはいちばん簡単で確実な方法ですが、 全部を絶対パスで記述したのでは実際にホストにアップロードしなければリンク切れのチェックも行えません。
一般的にはデータだけを別のサーバーに置いてある等の特殊な場合を除いて、 ローカルでのメンテナンスのしやすい相対パスを使って記述します。

絶対パスに対して相対パスとは、現在の位置を基準にした考え方で、 現在地と目的地のファイルまでの相対的な位置関係を基に記述します。
サーバー上のディレクトリー構造とローカルでのディレクトリー構造を同じにしておけば、 相対パスでの記述によりローカル上でのメンテナンスが楽になります。

相対パスでの記述において必ず覚えておかなければならない事は二つの記号とその意味です。
半角のドットとスラッシュで表わす記号の意味は下記の通りです。

./  この記号 ./ で現在位置のディレクトリーを表わします。
../ この記号 ../ で現在位置より1つ上の階層のディレクトリーを表わします。
../../ 二段階上がるには ../../ と2回続けます。

サイトトップ
index.html
file0.ext
dir_a
│├file1.ext
│└file2.ext
dir_b
│├file3.ext
│├dir_c
││└file4.ext
〜〜

左図のような場合を想定して下記に相対パスの記述例を示します。

現在地と目的地までの相対パス(PATH)の記述例
現在の場所示したい場所リンク相対パスの記述例
index.htmlfile0.ext <a href="file0.ext">表示名</a>
又は <a href="./file0.ext">表示名</a>
index.htmldir_a/file1.ext <a href="dir_a/file1.ext">表示名</a>
又は <a href="./dir_a/file1.ext">表示名</a>
dir_a/file1.extdir_a/file2.ext <a href="file2.ext">表示名</a>
又は <a href="./file2.ext">表示名</a>
dir_a/file1.extdir_b/file3.ext <a href="../dir_b/file3.ext">表示名</a>
dir_b/file3.extfile0.ext <a href="../file0.ext">表示名</a>
file0.extindex.html <a href="index.html">表示名</a>注1
又は <a href="./">表示名</a>注2
dir_b/dir_c/file4.extindex.html <a href="../../index.html">表示名</a>注1
又は <a href="../../">表示名</a>注2

表中”表示名”と記述して有る物はリンク アンカー テキストの事です。

注1: index.html を指定するとローカルでの保守が容易になります、 但し、ホスト側にアップロードしてブラウザでアドレスバーを見ると index.html が表示されます。

注2: "./" にした場合は index.html は表示されませんが、 ローカル環境ではindex.htmlの在るホルダーを表示してしまう事があります。
ホスト側にアップロードした場合ファイル名の省略は index.html index.htm の順に検索されます。

リンクに関する相対パスの説明しかしていませんが、 下記の様に画像や他のファイルを指し示す場合も、考え方は全く同じです。

<Img Src="相対パス/****.gif" Width="**" Height="**" Alt="相対パスの説明画像">

Back フレーム ページで音楽を演奏させる方法  Next ホームページ掲載に付いて一言

Top