パスについて

パスとは

HTMLの編集中などに、別のHTMLにリンクしたり、画像ファイルを読み込みたい場合があります。

画像を読み込む例

<img src="./image/picture.jpg">

別のページにリンクする例

<a href="./myhobby.html">趣味のページはこちら</a>

この時、正しく画像などを呼び出すためには、ファイルが存在する場所を正確に指定する必要があります。
このファイルの場所を指定する方法のことをパス (path)と言います。
上の例では、赤文字の部分がパスに相当します。

パスには、相対パス と 絶対パス の二種類があります。

相対パス

相対パスは、パスの一種で、基準となるファイルから見た、相対的な位置の表し方です。
基準となるファイルと「同じ場所にある」とか、「一つ上のフォルダにある」、「二つ上のフォルダにある」といったふうに位置関係を表現します。

相対パスはあくまで、ある場所から見た相対的な位置関係で指定をするので、関連ファイルを丸ごと別の場所に移動してもそのまま動作するのがメリットです。ただし、相対的な位置関係がズレてしまうと、参照できなくなります。

相対パスを使うにあたっては、いくつかの約束事があります。およそ以下の４つの事をおぼえればＯＫです。

フォルダは フォルダ名/ (フォルダ名の後ろにスラッシュ) で表します。
基準となるファイルと同じ場所は ./ (ドット・スラッシュ) で表します。
パス先頭の ./ は省略できます。
一つ上のフォルダは ../ (ドット・ドット・スラッシュ) で表します。
（もし二つ上のフォルダなら ../../ のようにつなげます）

具体例

例えばファイルが以下のように配置されている状況を考えます。

上の図の状態を簡略化して表すと、各ファイルは下のような位置関係となります。

それでは、さまざまなファイルを参照する時にどのように記述するのか、詳しく見てみましょう。

現在 index.html を編集中とします。

そしてさっそく画像を表示させたいとします。
index.html から見てさまざまな位置関係にある画像ファイルを呼び出すために、相対パスを使う必要がありそうです。
この時……
- index.htmlと同じフォルダ内にあるtop.gifを参照するには、以下のように書きます。
```
<img src="./top.gif">
```
  index.htmlと同じ場所にあるファイルなので先頭に ./ をつけるというわけです。
  先頭の ./ は省略できるので、以下のように書くこともできます。
```
<img src="top.gif">
```
  つまり単純にファイル名を書くと、現在編集中の index.html と同じ場所から指定のファイルを探そうとするわけです。
- imageフォルダの中にある title.gif を参照するには、以下のように書きます。
```
<img src="./image/title.gif">
```
  index.htmlと同じ場所にある ./、imageフォルダの中の image/、画像ファイル title.gif を全部つなげて ./image/title.gif になるわけです（上の４つの約束事に忠実！）。
  やはり先頭の ./ は省略できるので、以下のように書くこともできます。
```
<img src="image/title.gif">
```
  ファイルの数が増えてくると、画像を１つのフォルダにまとめたりする場合があるので、この使い方をするシーンは多いでしょう。
次は、pic.html を編集中だとします(つまり基準となるファイルは menu/pic.html です)。
そして今度は pic.html に、画像を表示させたいとします。

この時……
- pic.html と同じフォルダにある face.jpg を参照するには、以下のように書きます。
```
<img src="./face.jpg">
```
  編集中のpic.htmlと同じ位置にあるので、相対位置の表現は上記で良いわけです。
  もちろん先頭の ./ を省略することもできます。
```
<img src="face.jpg">
```
- pic.html から見て一つ上の作業用フォルダ内にある top.gif を参照するには、以下のように書きます。
  ../ でフォルダの外、つまり一つ上位の階層を参照しているのがポイントです。
```
<img src="../top.gif">
```
- pic.html から見て隣の image フォルダの中にある title.gif を参照するには、以下のように書きます。
  ../ と image/ を組み合わせて参照します。
```
<img src="../image/title.gif ">
```
- なお参考までに、リンク（ハイパーリンク）を作る場合も、同様に相対パスで指定できます。
  たとえば pic.html から見て一つ上の階層にある index.html にリンクをするには、以下のように書きます。
```
<a href="../index.html">トップページに戻る</a>
```
  HTMLタグは異なりますが、相対パスの書き方は同じルールですね。ひとつ上の階層 ../ にある index.html をつなげて ../index.html と書くわけです。

相対パスのまとめ

このように、あるファイルから見た相対的な位置関係を表す書き方が「相対パス」です。

主に別の場所にあるファイルを呼び出したり、リンクしたりする際に必要となるでしょう。

相対パス４つのルール

フォルダは フォルダ名/（フォルダ名の後ろにスラッシュ）で表します。
基準となるファイルと同じ場所は ./（ドット・スラッシュ）で表します。
パス先頭の ./ は省略できます。
一つ上のフォルダは ../（ドット・ドット・スラッシュ）で表します。

相対パスは相互の位置関係を示すものなので、例えばフォルダ全体をそのまま別の場所に移動しても、一度設定した相対パスはそのまま動作するのがメリットです。
逆に言えば、相対的な位置関係がズレてしまうと参照できなくなります。

小規模サイトでも画像ファイルの数は数百に及ぶことがあります。このようなとき、必要な画像ファイルなどをフォルダにまとめて、相対パスで参照するのがおすすめです。

このような相対パスの表現は、画像を参照したり、リンクで接続したりする際に頻繁に必要となりますので、上の４つの約束事をマスターしておいてください。

絶対パス

絶対パスも、パスの一種で、システム上のファイルの位置を厳密に書く方法です。
基準をどのファイルにおいても、絶対パスの内容は変わりません。

例１：ウェブサーバーの場合

京都産業大学のウェブサーバーも含め、多くのウェブサーバーは UNIX系のシステムで動作しています。
UNIX系のシステムにおいては、以下のように絶対パスを表記します。

/NF/home/gXXX/gXXXXXX/public_html/index.html

基本的には「相対パス」と同じルールで記述します。
先頭が ./ ではなく、システムの最上位階層を意味する / から始めて、経路にあるフォルダを全て記述します。つまり、システム上の正確な位置を全部書くのが「絶対パス」というわけです。
正確な場所は、アップロード用アプリでウェブサーバーに実際に接続したときに判明します。
例えばサーバーにファイルをアップロードするためのアプリ FileZilla でサーバーにアクセスした際には「リモートサイト：」欄に記載されます。
絶対パスはサーバーによって定められています¹⁾。
- 多くの場合、サーバーが異なると、絶対パスも異なりますので、そのつど調べる必要があります。
- 一般のレンタルサーバーなどでは、マニュアルに書いてある場合があります。
CGI（ウェブ上で動作させるプログラム）などを利用する際には、絶対パスで指定しないと動作しない場合があります。そういうケースで絶対パスを知る必要があるでしょう。
常にシステム上の特定の場所を指しているので、絶対パスを書いたファイルを移動させても問題ありません。自身の位置に関係なく、絶対に同じ場所にあるファイルを参照しようとします。

例２：別のサイトのデータを参照する場合

画像やリンクなどを作成する際に、他のサイトのデータを読み込むこともできます。
例えば画像を読み込む場合、http:// または https:// から始まるアドレス(URL) を使って以下のように記述します。

<img src="http://abc.com/xyz/picture.jpg">

URL も、インターネット上のとある場所を正確に指しているので、一種の「絶対パス」と言えます。
画像にアクセスするのに必要な URL を http:// または https:// から全て記入してください。

自分のサイト内にある画像も、URLを使って表現することができます。

<img src="https://www.cc.kyoto-su.ac.jp/~g0000000/image/title.gif">

やはりネット上の特定の場所を指しているので、ファイルを移動させても問題ありません。
ただし絶対パスは、参照するたびにURLを解釈する処理²⁾が必要な分、相対パスよりも処理が遅くなる傾向にあります。多用するとサイトのレスポンスは悪化するでしょう。

まとめ

このように、HTMLでは他のファイルを参照する際「相対パス」や「絶対パス」を使う必要があります。

サイトの規模が大きくなって、関連ファイルが増えてくると、フォルダなどで整理をする必要が出てきます。そうすると、別のフォルダに入っているファイルを呼び出したいことも多くなります。そのような状況で必要になる技術なので、ぜひマスターしておきましょう。

戻る

¹⁾

システムの都合で決まるので、利用者はそれに従うしかありません。

²⁾

DNS(DomainNameSystem)サービスを使ってドメイン名（xyz.comのような名前）をIPアドレス（192.168.111.222のような数字）に変換する作業です。

目次