【HTML】ルート相対パスとは?(前回の続き)

Table of Contents

こんにちは、佐藤です!!

今回は、前回説明を省略した3つ目のパス「ルート相対パス」について記載していきます!

前回は「絶対パス・相対パス」について書きました。
さらっと内容を復習しますと

  • 絶対パス:対象のファイルの位置を最初から最後までフルで記載する。
  • 相対パス:自分から対象のファイルまでの道順を記載する。

という違いがありました。

詳しくは前回の記事「【HTML】絶対パス・相対パスの違いは?」をご覧ください!

【HTML】絶対パス・相対パスの違いは?

「ルート相対パス」とは?

ルート相対パス(別名:ルートパス、サイトルート相対パス)は「ルート階層からの道順を記載する」方法です。

そもそもルート階層とはWebサイトのトップページがある階層です。

下記の図ではindex.htmlがある階層ですね。

例えばindex.htmlでdog.pngを指定したいとしましょう。

先に記述方法を書いてしまうと

<img src=”/img/dog.png”>

となります。

では読み解いていきましょう!

ルート相対パスではルート階層からの道順を書きます。
先頭の「/」はルート階層という意味です。

つまり「ルート階層 の imgフォルダ の dog.pngファイル」と記載しているわけです。

このようにルート相対パスは/ルート階層のフォルダ名/ファイル名のように記載します。

ここまでは理解できましたか?

 

 

ではここで問題です!下記の図をご覧ください。
sample.htmlでdog.pngを指定したいときは、どのように記載すればよいでしょうか??

できましたか??

今回も「ルート階層 の imgフォルダ の dog.pngファイル」と指定すればいいため、

答えは

 <img src=”/img/dog.png”>

となります。
ここで記載方法を比較してみます。

  • index.htmlでdog.pngを指定したとき:<img src=”/img/dog.png”>
  • sample.htmlでdog.pngを指定したとき:<img src=”/img/dog.png”>

はい、全く同じですね。

つまりルート相対パスの考え方は、どちらかというと絶対パスに近いです。
名前に惑わされないようにしてください!

 

ルート相対パスのメリットは?

ルート相対パスのメリットを上げると

  • どこに何があるかがわかりやすい。
  • ドメインの変更に対応できる。

となります。

そのためルート相対パスは大規模なサイトを開発するときに活躍します!

ただし前回も記載したように、現在自分が携わっているプロジェクトで指定がある場合は、その方針に合わせましょう。
 また<a>タグで外部のサイトをリンク先に指定する場合には「絶対パス」を使いましょう。

 

絶対パス・相対パス・ルート相対パス まとめ

前回・今回と2回に渡り、「絶対パス・相対パス・ルート相対パス」の3つのパスについて説明しました。
最後に記載方法を図でまとめます。

絶対パス

対象のファイルの位置を最初から最後までフルで記載する。

<img src=”https://animal.com/img/dog.png”>

 

相対パス

自分から対象のファイルまでの道順を記載する。

<img src=”./img/dog.png”>

ルート相対パス

ルート階層からの道順を記載する。

<img src=”/img/dog.png”>

以上、絶対パス・相対パス・ルート相対パスの説明でした。

パスは記載方法が似ているため、ごっちゃになりやすい知識だと思います。
今回の記事が、皆さんの知識の整理に役立てたら嬉しいです!

最後まで読んでくださってありがとうございました!!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール