【HTML】絶対パスと相対パス

シェアする

office-relax-clean-ping-pong

前回の記事で、絶対パスと相対パスという用語が出てきました。
この~パスとは、URLを指定する方式です。

それぞれの指定の仕方によって、メリット、デメリットがありますので、用途に応じて使い分けることが大事です。

スポンサーリンク
スポンサーリンク

絶対パス

絶対パスは、フルパスとも呼ばれるもので、URLを全て記載する方式です。

通常、皆さんがサイトを訪問したりすると表示されるURLは「http://www.○○○.com/△△△.html」といった形で表示されているかと思います。

このように、「http://」から始まり、ファイルがある場所まで全てのパスを記載します。
省略せずに記載するため、場所によっては長いパスになってしまいますが、元のページがどこにあっても確実にリンクすることができます。

また、外部サイトは必ず絶対パスで指定します。

相対パス

相対パスとは、内部サイトにおいて簡略的なURLで場所を指定する方式です。

名前の通り、相対的な場所を指定するため、「現在の場所」に対してどこにあるかを指定します。
「現在の場所」が変われば指定するパスは変わるため、間違った場所を指定しないよう気をつけてください。

相対パスは、サイトのルートパス(http://www.○○○.comといった部分)を含まないため、サイトの場所が変わってもサイト構造が変わらなければパスを変更しなくても良いというメリットがあります。

現在の階層

例えば、現在の場所と同じ階層にあるcontact.htmlファイルにリンクする場合は「contact.html」を指定します。

下位の階層

現在の場所にcontactというフォルダがあり、そのフォルダの中にあるcontact.htmlファイルにリンクする場合は、「contact/contact.html」を指定します。
下位の階層は「/(スラッシュ)」で繋いでいきます。

上位の階層

現在の場所の上位の階層にあるcontact.htmlファイルにリンクする場合は、「./contact.html」を指定します。
上位の階層は「./(ドット スラッシュ)」で繋いでいきます。
二つ上の階層に移動したい場合は、「././」といった具合に連続して記載します。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

コメントをどうぞ

メールアドレスが公開されることはありません。