相対パスの表し方

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 相対パスの表し方

前のページで、相対パスと絶対パスの使い方を見ました。 このページでは、相対パスをどのように表すかを見ていきます。

相対パスの表し方

相対パスはどのように記すことができるでしょうか? 結論だけ述べると、以下のようになります。

同一フォルダ内のファイル
ファイル名そのままで表します。
下位フォルダのファイル
フォルダ名/ファイル名で表します。
上位フォルダのファイル
../ファイル名で表します。
別々のフォルダのファイル
視点を上位階層に移して考えます。

と言っても、これを見ただけでは何がなんだか分からないと思います。 次に、例を上げて考えてみることにしましょう。

相対パスの表し方の例

以下のようなファイル構成の場合を考えてみましょう。 フォルダA,フォルダB,index.html,link.htmlは同一階層(同一フォルダ内)にあるとします。 フォルダAの中にはphoto.htmlが、フォルダBの中にはtown.htmlがあります。

ファイルの構成

同じ階層(同一フォルダ内)の場合

上図で「index.html」から見た「link.html」の相対パスは、 ファイル名そのままで「link.html」です。 同一フォルダ内であれば、ファイル名そのままでいいのです。 同じ町内の人であれば、単に「山田さん」と呼ぶだけで通じるのと同じです(前項)。

下位フォルダの場合

「index.html」から見て、photo.htmlはどのように表せるでしょうか? 隣町の山田さんの場合、 「1丁目の」という補足情報を入れることによって特定できました(前項)。 ファイルの場合も同じように、 そのファイルが入っているフォルダ名を補足情報として入れることにより特定できます。 相対パスは「A/photo.html」と表すことができます。

下位フォルダ内のファイルの場合は 「フォルダ名/ファイル名」で相対パスを表します。 もし2つも3つも下のフォルダにあるファイルを指定するのであれば、 「フォルダ1/フォルダ2/フォルダ3/ファイル名」という感じで表します。 この場合はフォルダ1の中にフォルダ2があり、フォルダ2の中にフォルダ3があり、 フォルダ3の中にあるファイル-という意味になります。

上位フォルダの場合

「photo.html」から見てindex.htmlはどのように表せるでしょうか? この場合は、「上の階層(フォルダ)の」という補足情報を入れる必要があります。 相対パスで「上の階層」は「../」と表します。 ですからこの場合は「../index.html」となります。 3つ上の階層のファイルを指定する場合は、「../../../ファイル名」と表わします。

別々のフォルダにあるファイル

photo.htmlからtown.htmlを指定するにはどうしたらよいでしょうか? この場合はまず視点を変えます。 「../」と記入し1つ上の階層に視点を移すと、 town.htmlは「B/town.html」と表せます。 ですからこの2つを合わせて../B/town.html」と記すことになります。

NINJABUTTON