絶対パス・相対パス・ルート相対パスを理解しよう

パスについて

パスとは、ファイルの場所を示すネット上の住所にあたる情報です。

具体的には、下記のようなものが『パス』になります。

• https://emplos.jp
• ../images/photo.jpg
• /gallery/index.html

『パス』は移動先のページや表示させる画像がどこにあるかを指定するために使います。

パスの使い方

例えば、ハイパーリンクをつける<a>要素の場合、リンク先のパスが必要になります。パスがないとどこにリンクしたらいいのかブラウザはわかりません。下記のように指定すれば、どこにリンクするかを示すことができます。

<a href=”パス“>リンク先</a>

具体例としてエンプロスのホームページをリンク先にしたい場合は、下記のような記述になります。

<a href=”https://emplos.jp“>エンプロスのホームページ</a>
(注：https://emplos.jpはエンプロスのホームページのURLです)

また、画像を表示する<img>要素の場合、どこに置いてある画像を表示させるか指定するためにパスが必要になります。

<img src=”パス” alt=””>

具体的には下記のような記述になります。
<img src=”./images/photo.jpg” alt=””>

パスがどのようなもので、どのようなシーンで使うかは説明しました。それでは、パスには３種類の「絶対パス」と「相対パス」、「ルート相対パス」があります。それぞれの特徴やメリット・デメリットを解説します。

絶対パス

絶対パスとは、どこのページで指定しても、必ず目的地にたどり着けるパスです。ネット上の住所であるURLを直接指定します。ネットの住所であるURLを省略せず指定するので、誰がみても間違いはないです。

<a href=”https://emplos.jp/”>エンプロスのホームページ</a>（https://emplos.jp/へリンク）と指定すると、インターネットがつながっている状態であれば、どこのページにいてもエンプロスのホームページに移動できます。

実際の住所に例えてみると、兵庫県姫路市平野町18番地（注：エンプロスの所在地）は、どこの都道府県にいる人にも場所が特定できる固有のものになります。

こんな時につかいましょう

• 指定したいファイルが外部サイトにあるとき

こんな時は使わないほうがいい

• 指定するファイルが同じドメイン内のサイトにあるとき
• WordPressのテーマなど、ドメインが変わることを想定できるとき（ただし、外部サイトの指定は除く）

指定したいファイルが同じドメインのときには、極力相対パスにしましょう。稀にドメインを変えたり、SSL化するのにhttpからhttpsにするなどが必要になった場合に、ページ全体のURLをいちいち変更したり、手間が発生します。

相対パス

相対パスとは、同じドメイン内の目的地ならば、今いる現在地を起点に省略して指定できるパスのことです。違うドメインのファイルは指定できません。

同じドメイン内にいるのであれば、わざわざ長いパスで説明しなくても、省略したパスで説明した方がスッキリします。

例えば、兵庫県にいる方に、兵庫県姫路市平野町18番地とは説明しませんよね？少しまどろっこしいです。
ただし、兵庫県が起点であっても、平野町18番地と説明すると大事な部分を省略してしまってそもそも何市の話かわからないために、たどり着けません。

また、大阪市の起点であった場合、平野町18番地と指定すると、全く違う場所を案内されてしまいます。なので、仮に日本というドメイン内にいるのであれば、大阪市にいる方は一度日本の階層まで戻ってもらって、兵庫県に行ってもらう必要があります。

相対パスを使いこなす

相対パスを使いこなすには、『/』の使い方を覚えましょう。

『./』（./は省略可）は現在地を表します。『../』は一つ上のディレクトリに戻ります。
この２つをしっかり覚えておいてください。

大阪市にいる方が兵庫県姫路市平野町18番地に行きたいのであれば、

（大阪市はパスで例えると日本国/大阪府/大阪市）ここは図で表したい。

../../兵庫県/姫路市/平野町/18番地　と指定します。

こんな時につかいましょう

• 指定するファイルが同じドメイン内にあるとき

こんな時は使えない

• 指定するファイルが外部サイトにあるとき

 

ルート相対パス

ルート相対パスのルートとは、一番上の階層のことを指します。今回の場合はドメインに当たります。

つまり、ルート相対パスは、ドメイン直下を起点に指示できるパスということです。この特性から相対パスと比べ、非常にシンプルに表すことができます。

ルート相対パスは、下記のような『/』から始まるパスです。文頭の『/』は『（現在のドメイン）/』の略になります。

• /images/photo.jpg
• /gallery/index.html

仮に、https://emplos.jpのサイト内から指定した場合、
どの階層かは問わず『/images/photo.jpg』は『https://emplos.jp/images/photo.jpg』を意味します。

https://example.comのサイト内から指定すると
『/images/photo.jpg』は『https://example.com/images/photo.jpg』を意味します。

ドメイン内のどの階層から指定しても同じパスが使える

ルート相対パスの最大のメリットは、どの階層から指定しても同じパスが使えることです。

『https://emplos.jp/images/photo.jpg』のファイルを指定したい場合、
ルート相対パスでは『/images/photo.jpg』と指定します。

この場合、https://emplos.jpから指定しようが、
https://emplos.jp/example/index.htmlから指定しようが、
『https://emplos.jp/images/photo.jpg』のファイルを指定したことになります。

仮に、相対パス『./images/photo.jpg』で指定すると、
https://emplos.jpから指定した場合、『https://emplos.jp/images/photo.jpg』を指定されますが、
https://emplos.jp/example/index.htmlから指定した場合は、『https://emplos.jp/example/images/photo.jpg』となり、目的のファイルを指定することができません。

このように、ドメイン内の階層が複雑な場合にとても有効なパスがルート相対パスになります。

こんな時につかいましょう

• 使いたいファイルが同じドメイン内にあるとき
• サイト内の階層が複雑なとき

こんな時は使えない

• 指定するファイルが外部サイトにあるとき
• ローカル環境で使う場合

ルート相対パスはサーバーにアップした時にしか機能しません。ローカルで使用したいときは、仮想サーバー上で使うなどの工夫が必要です。慣れないうちは相対パスを使用するほうが好ましいです。

まとめ

パスを理解することは、Web制作において必須条件です。パスの理解がないと、何が原因で思うように表示されていないか理解することができないからです。

早い段階で理解しておきましょう。

まずは絶対パス・相対パスをマスターしてください。
ルート相対パスは確かに便利なパスではありますが、中・大規模サイトなどでそのメリットが発揮されます。学習中は、中・大規模サイトを触ることはないと思うので、また余裕ができてから勉強していきましょう。