みなさんは『相対パス』や『絶対パス』というものを聞いたことがあるでしょうか。
この『パス』というものは、ホームページの制作・管理において必要不可欠の知識です。しかしサイト作りを始めたばかりの人の中には、パスを指定する方法がイマイチ分からないという人が多いと思います。
そこで今回は、『相対パス』と『絶対パス』の違いや、『パス』の指定方法について、分かりやすく解説していきます！
『絶対パス』と『相対パス』の違いについて
"パス"とは『特定のファイルやフォルダの位置を指定するための記述』のことを言います。
またパスには2種類あり、それが『絶対パス』と『相対パス』です。この2つについて、こんがらがる人が多いと思うので、違いを簡単に説明していきます。
絶対パスとは、"URL"のこと
『絶対パス』と言われても難しく考える必要はありません。要は"URL"のことです。
"URL"についてはみなさん知っていると思います。そう、『https://～』から始まるあの文字列のことです。
▼このページの絶対パス(URL)
絶対パス(URL)は簡単に言うと、『ウェブ上でのページ(もしくはファイルデータ)の住所』のことです。
なので絶対パスと言われたら、「あ～URLのことか～」なんて思っていただければ基本的にはOKです。
相対パスとは、現在位置を基準とした特定のファイルの位置
ホームページを作っている人で、HTMLなどコードを記述している人であれば、この『相対パス』について理解する必要があります。
相対パスとは『現在位置を基準とした、特定のファイルの位置』のことです。
...と言われてもピンとこない人が多いと思います。そこで以下に『絶対パス』と『相対パス』の違いについて、分かりやすく説明した例を紹介します。
（画像参照：https://toretama.jp/yougo17.html）
まず、先ほど『絶対パス』のことを、ウェブ上での住所と説明しました。なので現実の住所に例えると、絶対パスは以下の画像のように相手の住所を直接指定する文字列ということになります。
それに対して『相対パス』は、『自分の住所を基準としたときの、相手の住所』のことを言います。
例えば以下の画像のように相手と同じアパートに住んでいる場合、相手の住所を説明するときにいちいち「神奈川県横浜市～」なんて言わなくても、同じアパートに住んでいるのだから簡単に「101号室です」と言えばいいですよね。これが『相対パス』です。
また道案内で例えた場合、『絶対パス』は目的地の住所(URL)をそのまま伝える方法。一方『相対パス』は、『今いる場所から道を曲がって、道路沿いのつきあたりを右に～』というように、現在の場所を基準として目的地までの経路を案内する方法と言えます。
『絶対パス』と『相対パス』の指定方法
以上で説明した絶対パスと相対パスの違いをふまえて、それぞれの指定方法について説明していきます。
絶対パスの指定方法
絶対パスの指定方法は簡単です。指定したいページやファイルの場所を、単純にトップURLから順に記述するだけでOKです。
例えば以下のような構造をした『https://abc.com』というトップURLのサイトがあるとします。
このとき、『movie』フォルダ内の『review.html』というページにアクセスしたい場合を考えます。ホームページのトップURL『https://abc.com』から『review.html』までの経路は以下の通りです。
https://abc.com → movie → review.html
パスを指定する際、フォルダやファイルの区切りはスラッシュ「/」で表します。なのでこの経路の矢印(→)をスラッシュ「/」に置き換えたものが、絶対パスとなります。
▼『movie.html』の絶対パス
https://abc.com / movie / review.html
また、画像ファイルである『sample.jpg』を読み出したい場合も以下のように指定します。
https://abc.com / images / sample.jpg
『絶対パス』はこのように、自分の位置に関係なく、相手の位置をトップURLから記述するだけで良いのです。
相対パスの指定方法
絶対パスとは異なり『相対パス』では自分の場所を基準に、特定のファイルを指定します。
例えば『index.html』のページに、『function.js』というファイルを読み込ませたい場合を考えます。
このとき、『index.html』から『function.js』までの経路は以下の通りです。
index.html → movie → js → function.js
このとき『index.html』のページに記述するパスは以下のようになります。
movie / js / function.js
※相対パスでは、現在の自分の場所は省略します。
今度は『review.html』のページに『sample.jpg』の画像を読み込ませたいとします。
このとき、『review.html』から『sample.jpg』までの経路は以下の通りです。
review.html → images → sample.jpg
ここで注意したいのは、『review.html』から『images』までの経路で逆走が起きているということ。このように一階層前に戻る場合は、先頭に「../(ドットドットスラッシュ)」を付けます。
なので『review.html』のページに記述するパスは以下のようになります。
../ images / sample.jpg
※2階層前に戻る場合は「../../」を、3階層は「../../../」といった感じに記述します。
このように『相対パス』は、自分の場所を始点としたときの、相手の場所までの経路を記述します。
パス指定の例
では実際に、上の例での『index.html』のページに『function.js』ファイルを読み込ませたい場合の、それぞれの記述例を見てみます。
『絶対パス』では以下のような書き方になります。
＜script src=
"https://abc.com/movie/js/function.js"＞
＜/script＞
一方『相対パス』では『index.html』を始点とするため以下のような書き方となります。
＜script src=
"movie/js/function.js"＞
＜/script＞
まとめ
最後に『絶対パス』と『相対パス』についてもう一度まとめます。
『絶対パス』・・・自分の位置に関係なく、相手の位置をトップURLから記述する方法
『相対パス』・・・自分の場所を始点としたときの、相手の場所までの経路を記述する方法
なお、「ファイル読み込み行を記述するとき、絶対パスと相対パスのどちらで記述した方が良いのか」というご質問をよくいただきますが、どちらでもOKです。自分の分かりやすい方で記述してください。
いかがでしたでしょうか。この記事で『パス』について理解できた！という方がいれば嬉しいです。
なお今回説明した『パス』を含め、ホームページ作りの基礎を学びたいという方は、以下の参考書を一番おすすめします。
-
-
ホームページ制作を初めて学ぶのならコレ一冊でOK！知識ゼロの私でもサイトが作れたおすすめ参考書
「ホームページを作りたい！」「自分のオリジナルサイトを立ち上げてみたい！」と思ったことのある方は多いと思います。 しかしいざ作ってみようとすると"HTML"や"CSS"など初めて聞く単語ばかり出てきて ...
続きを見る
