ホームページ作成講座相対パスの表し方

相対パスの表し方

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

同一フォルダ内のファイル

ファイル名そのままで表します。

下位フォルダのファイル

フォルダ名/ファイル名で表します。

上位フォルダのファイル

../ファイル名で表します。

別々のフォルダのファイル

視点を上位階層に移して考えます。

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

相対パスの表し方の例

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

同じ階層（同一フォルダ内）の場合

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

下位フォルダの場合

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

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

上位フォルダの場合

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

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

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