【HTML】相対パス・絶対URLだけじゃない！便利な「ルート相対パス」…はご存じですか？

HTMLを書くときに、まず絶対に必要なのが「リンク」ですよね。

<a>タグに関しては、正式には「アンカータグ」と言います。

アンカータグに囲まれたテキストは、「アンカーテキスト」です。

<img>タグは、普通に「イメージタグ」ですね。

これらのタグに必ず必要なもの。それは「URLパス」です。

※URLは、ココナラブログでは使用できないらしく…全角文字で表現させていただきます。
m(_ _)m

■まずは「絶対URL（絶対パス）」

これは ｈｔｔｐｓ：／／～（ｈｔｔｐ：／／～）から書かれるURLですね。

誰もがご存じだとは思います。

Web制作の現場では「絶対パス」と呼ばれることも多いですが、URLで表記する場合は「絶対URL」と呼ばれることが一般的です。

■そして、「相対パス」

<a href="．／ｘｘｘ．ｈｔｍｌ">
<img src="．．／ｉｍｇ／ｘｘｘ．ｊｐｇ">

などという風に、現在のHTMLファイルを基準として指定するリンクです。

■ご存じでしたか？「ルート相対パス」

Webサイト（ドメイン）のルートディレクトリを基準にしたリンクを指定する場合、ドメインを省略して「/（スラッシュ）」で表現できます。

<a href="／ｘｘｘ．ｈｔｍｌ">
<img src="／ｉｍｇ／ｘｘｘ．ｊｐｇ">

こんな感じです。

例えばですが、

/blog/category/project/x/

というフォルダからのリンクであっても、先頭をスラッシュにして

<a href="／ｘｘｘ．ｈｔｍｌ">
<img src="／ｉｍｇ／ｘｘｘ．ｊｐｇ">

とすればドメインルートからのリンクになります。

これがめっちゃ便利で、ファイルをどの階層に移動しても、ドメインルートからのリンクは変わらないので、普通にリンクがつながります。

通常の相対パスでは、HTMLファイルを別の階層へ移動するとリンク先を修正しなければならないことがあります。

この「ルート相対パス」、意外と知られてないんですよね(^^;)

私はずっと「ルートパス」って呼んでたんですが、

正式名称は「ルート相対パス」なんだそうです。

知っている人だったら、「ルートパス」でも通じるそうですが。

■PHPな場合は注意！！

HTMLでの「/」はWebサイトのルートを意味しますが、PHPの include() や file_get_contents() では、OS（サーバー）のルートディレクトリを意味します。

同じ「/」でも意味が異なるので、ご注意ください(^^;)

■まとめ

というわけで、知っていたらすごく便利な「ルート相対パス」のご紹介でした。

ずっと相対パスで書いていたHTMLファイルで、フォルダ移動した際にパスを置換して作業したりする手間がこれで省けます。

同じサイト内でファイル構成を変更してもリンク切れしにくく、別のドメインへ移行する際もURLを書き換える手間を減らせます。

知っていたらなかなか便利なので、今回ご紹介させていただきました！

私は現在、HTML・CSSで画像やCSSファイル、JavaScriptファイルを指定するときは、ほぼすべてルート相対パスで書いています。

慣れると非常に便利ですよ(^^)