今更きけない絶対パス・相対パス・ルートパスの違い

こんにちは。今日はパスの記述の違いについてまとめようと思います。絶対パス・相対パスの違いは知っていたのですが、そういえばルートパスはよく知らないなと思い調べました。

ではさっそく本題に入りましょう〜！

パスとは？

まず、パスとはパソコン上でのファイルの場所を示すものです。パスを理解しておかないと画像が表示できなかったりするので基礎知識としてはじめに勉強するかと思います＾＾

階層に分かれている↓

では以下よりそれぞれの違いについて触れていきますー！

絶対パスとはweb上のどこから指定しても変わらない絶対的なものです。

https://（もしくはhttp://）の後にドメイン名、フォルダ名、ファイル名を指定します。

↑こんなイメージ

使う場面としては、

などで、あまり使う頻度は高くないと思います。

相対パスとは現在のファイルの場所を基準に目的のファイルの場所・名前を指定します。

わかりやすく例えると、
人から道を聞かれたとします。そのときの説明方法として大阪府大阪市○番地の〜といった住所を言われても相手はいまいちピンとこないと思います。この角を右に曲がって〜といった具合に現在地からの道順を教えてあげたほうが分かりやすいですよね。これが相対パスです！

相対パスは現在地が変わると書き方が異なるので正しく理解しておくことが必要です！

よく間違う注意点として、HTMLファイルとCSSファイル（背景画像指定など）ではファイル位置が異なるためパスが違うことがあるということです。

最初の頃は背景画像を指定しても表示されないことがありなぜか分からなかったのですが、これが原因だったんですよね(^^;

次から簡単に書き方を説明します！

index.htmlファイルを現在地として、imagesフォルダの中にある「cont_img01.png」を読み込みたい時は

と指定します。

index.htmlファイルと同層階にあるassetsフォルダに入り、順にくだっていきます。

app.cssファイルを現在地としてimagesフォルダの中にある「cont_img01.png」を読み込みたい時は

と指定します。

「../」は何を意味するのかというと、「一階層上がる」を表します。

もし二階層上がるなら「../../assets/images〜」といった具合になります！

ちなみに、一回層下がるは「スラッシュ/」で表します。

では本題のルートパスについて書きます！

まず、ルートとは通常webサイトのトップページがある場所のことです。

この構造だと、index.htmlをトップページとした場合この階層をルート階層と呼びます。

ルート相対パスでは必ず先頭にスラッシュ/を記述します。どうやらこのスラッシュがルート階層という意味を表しているようです。

そして、ルート階層を基準にパスを指定していきます。

感覚的には絶対パスに似ていて、現在のファイルがどこであっても常にルート階層を基準にして目的のファイルパスを書きます！なので相対パスのように書き方に悩まなくてもすみますね＾＾

imagesフォルダの中にある「cont_img01.png」を読み込みたい時、

と書きます。

こちら参考記事です↓より詳しく知りたい方はぜひ見てみてください＾＾

では今日はここまで〜〜