ホームページ作り−相対パスの表し方
相対パスの表し方について解説。
相対パスの表し方
相対パスはどのように記すことができるでしょうか？ 以下のようなファイル構成の場合を考えてみましょう。 フォルダＡ，フォルダＢ，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」と記すことになります。
HPWでは相対パスは自動取得されます。 しかし手書きでパスを書き記したり修正したりすることも多いので、 知識として身に着けておいて下さい。
同一階層内にあるファイルはの相対パスは、ファイル名そのまま。 下位フォルダにあるファイルの相対パスは、フォルダ名/ファイル名。 上位フォルダにあるファイルの相対パスは、../ファイル名。 別々のフォルダにあるファイルの相対パスは、視点を上位階層に移す。