戻る

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

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

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

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

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

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

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

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

1. フォルダは 「フォルダ名/」 (フォルダ名の後ろにスラッシュ) で表す。
2. 基準となるファイルと同じ場所は 「 ./」 (ドット・スラッシュ) で表す。
3. パス先頭の 「./」 は省略できる。
4. 一つ上のフォルダは 「../」 (ドット・ドット・スラッシュ) で表す¹⁾。

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

上の図の状態を文字で表すとこのような位置関係です。

public_html/ ┬ index.html
　　　　　　　 ├ top.gif
　　　　　　　 │
　　　　　　　 ├ menu/ ┬ pic.html
　　　　　　　 │　　　　└ face.jpg
　　　　　　　 │
　　　　　　　 └ image/ ─ title.gif

それでは、具体例を示してみましょう。

1. 現在 index.html を編集中とします(つまり基準となるファイルはindex.htmlです)。
   そしてHTMLで、画像を表示させたいとします。
   いろんな場所にある画像ファイルを呼び出すために、相対パスを使う必要がありそうです。

   public_html/ ┬ index.html      ← ここを編集中
   　　　　　　　 ├ top.gif
   　　　　　　　 │
   　　　　　　　 ├ menu/ ┬ pic.html
   　　　　　　　 │　　　　└ face.jpg
   　　　　　　　 │
   　　　　　　　 └ image/ ─ title.gif

   この時…

   • index.htmlと同じフォルダ内にあるtop.gifを参照するには、以下のように書きます。

     <img src="./top.gif">

     index.htmlと同じ場所にあるファイルなので先頭に「./」をつけるというわけです。
     先頭の「./」は省略できるので、以下のように書くこともできます。

     <img src="top.gif">

   • imageフォルダの中にある title.gif を参照するには、以下のように書きます。

     <img src="./image/title.gif">

     index.htmlと同じ場所にある「./」、imageフォルダの中の「image/」、title.gifを参照「title.gif」 を全部つなげて「./image/title.gif」になるわけです（上の４つの約束事に忠実！）。
     やはり先頭の「./」は省略できるので、以下のように書くこともできます。

     <img src="image/title.gif">

2. 次は、pic.html を編集中だとします(つまり基準となるファイルは menu/pic.html です)。
   そして今度は pic.html に、画像を表示させたいとします。

   public_html/ ┬ index.html
   　　　　　　　 ├ top.gif
   　　　　　　　 │
   　　　　　　　 ├ menu/ ┬ pic.html      ← ここを編集中
   　　　　　　　 │　　　　└ face.jpg
   　　　　　　　 │
   　　　　　　　 └ image/ ─ title.gif

   この時…

   • pic.html と同じフォルダにある face.jpg を参照するには、以下のように書きます。

     <img src="./face.jpg">

     編集中のpic.htmlと同じ位置にあるので、相対位置の表現は上記で良いわけです。
     もちろん先頭の「./」を省略することもできます。

     <img src="face.jpg">

   • pic.html から見て一つ上位のフォルダ (public_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」と書くわけです。

1. フォルダは 「フォルダ名/」 (フォルダ名の後ろにスラッシュ) で表す。
2. 基準となるファイルと同じ場所は 「 ./」 (ドット・スラッシュ) で表す。
3. パス先頭の 「./」 は省略できる。
4. 一つ上のフォルダは 「../」 (ドット・ドット・スラッシュ) で表す。

相対パスは、別の場所にあるファイルを呼び出す際に必要になる技術です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

戻る