パスとは何か?
Webページでは、HTMLファイル、CSS、画像、その他のリソースなど、さまざまなファイルを互いに参照して構成されています。
これらのファイルを正しく指定するために「パス」が必要です。
パスとは、目的のファイルまでの道筋を示すものです。
知識を取り込み、そして発信する
Webページでは、HTMLファイル、CSS、画像、その他のリソースなど、さまざまなファイルを互いに参照して構成されています。
これらのファイルを正しく指定するために「パス」が必要です。
パスとは、目的のファイルまでの道筋を示すものです。
相対パスは、現在のファイルを基準にリンク先の場所を指定する方法です。
サイト内で移動してもリンクが比較的切れにくく、内部リンクではよく使われます。
現在のファイルがcontents01.htmlで、index.htmlにリンクを張りたい場合は下記のように書きます。
<a href="../index.html">トップページ</a>
「../」は1つ上の階層に戻ることを意味します。
次にcontents01.htmlから同じ階層内にあるcontents02.htmlにリンクを張りたい場合は下記のように書きます。
<a href="contents02.html">次のコンテンツ</a>
./contents02.htmlでも機能しますが、「./」は省略することが可能です。
最後にcontents01.htmlから1つ下の階層にあるother01.htmlにリンクを張りたい場合は下記のように書きます。
<a href="other/other01.html">サブページ</a>
contents01.htmlの下の階層にあるフォルダ名otherの中のother01.htmlにアクセスするということです。
では、other01.htmlからindex.htmlにリンクを張りたい場合はどのようにすればいいか?
<a href="../../index.html">トップページ</a>
index.htmlはother01.htmlからは2つ上の階層なので、1つ上の階層に戻る「../」を2つ追加して書けばindex.htmlにアクセスできます。
相対パスの指定方法は、仮にサイト全体を別フォルダに移動してもリンクが切れにくいという利点があります。
ちなみに、HTML文書の基本構造で紹介したlinkタグ(CSSの読み込み)でも、原理は同じです。
絶対パスは、URLを完全に指定してリンクを作る方法です。
主に外部サイトや別ドメインへのリンクで使用します。
<a href="https://www.google.com/" target="_blank">Google</a>
絶対パスはどこからでもアクセスできる反面、サイト構造を変更した場合に修正が必要になることがあります。
内部リンクで多用すると管理が煩雑になるため、自サイト内では基本的に相対パスを使用するのが一般的です。