絶対パス・相対パス・ルート相対パスを理解しよう
Webデザイン・DTPデザイン
-
- 公開日
-
- 最終更新日
東秀亮

パスについて
パスとは、ファイルの場所を示すネット上の住所にあたる情報です。 具体的には、下記のようなものが『パス』になります。- 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=””> パスがどのようなもので、どのようなシーンで使うかは説明しました。それでは、パスには3種類の「絶対パス」と「相対パス」、「ルート相対パス」があります。それぞれの特徴やメリット・デメリットを解説します。絶対パス
絶対パスとは、どこのページで指定しても、必ず目的地にたどり着けるパスです。ネット上の住所であるURLを直接指定します。ネットの住所であるURLを省略せず指定するので、誰がみても間違いはないです。 <a href=”https://emplos.jp/”>エンプロスのホームページ</a>(https://emplos.jp/へリンク)と指定すると、インターネットがつながっている状態であれば、どこのページにいてもエンプロスのホームページに移動できます。 実際の住所に例えてみると、兵庫県姫路市平野町18番地(注:エンプロスの所在地)は、どこの都道府県にいる人にも場所が特定できる固有のものになります。こんな時につかいましょう
- 指定したいファイルが外部サイトにあるとき
こんな時は使わないほうがいい
- 指定するファイルが同じドメイン内のサイトにあるとき
- WordPressのテーマなど、ドメインが変わることを想定できるとき(ただし、外部サイトの指定は除く)
相対パス
相対パスとは、同じドメイン内の目的地ならば、今いる現在地を起点に省略して指定できるパスのことです。違うドメインのファイルは指定できません。 同じドメイン内にいるのであれば、わざわざ長いパスで説明しなくても、省略したパスで説明した方がスッキリします。 例えば、兵庫県にいる方に、兵庫県姫路市平野町18番地とは説明しませんよね?少しまどろっこしいです。 ただし、兵庫県が起点であっても、平野町18番地と説明すると大事な部分を省略してしまってそもそも何市の話かわからないために、たどり着けません。 また、大阪市の起点であった場合、平野町18番地と指定すると、全く違う場所を案内されてしまいます。なので、仮に日本というドメイン内にいるのであれば、大阪市にいる方は一度日本の階層まで戻ってもらって、兵庫県に行ってもらう必要があります。相対パスを使いこなす
相対パスを使いこなすには、『/』の使い方を覚えましょう。 『./』(./は省略可)は現在地を表します。『../』は一つ上のディレクトリに戻ります。 この2つをしっかり覚えておいてください。 大阪市にいる方が兵庫県姫路市平野町18番地に行きたいのであれば、 (大阪市はパスで例えると日本国/大阪府/大阪市)ここは図で表したい。 ../../兵庫県/姫路市/平野町/18番地 と指定します。こんな時につかいましょう
- 指定するファイルが同じドメイン内にあるとき
こんな時は使えない
- 指定するファイルが外部サイトにあるとき
ルート相対パス
ルート相対パスのルートとは、一番上の階層のことを指します。今回の場合はドメインに当たります。 つまり、ルート相対パスは、ドメイン直下を起点に指示できるパスということです。この特性から相対パスと比べ、非常にシンプルに表すことができます。 ルート相対パスは、下記のような『/』から始まるパスです。文頭の『/』は『(現在のドメイン)/』の略になります。- /images/photo.jpg
- /gallery/index.html
ドメイン内のどの階層から指定しても同じパスが使える
ルート相対パスの最大のメリットは、どの階層から指定しても同じパスが使えることです。 『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』となり、目的のファイルを指定することができません。 このように、ドメイン内の階層が複雑な場合にとても有効なパスがルート相対パスになります。こんな時につかいましょう
- 使いたいファイルが同じドメイン内にあるとき
- サイト内の階層が複雑なとき
こんな時は使えない
- 指定するファイルが外部サイトにあるとき
- ローカル環境で使う場合