トップページ >  HTMLタグ一覧  > 基礎知識：絶対パスと相対パス

■ 基礎知識：絶対パスと相対パス

 

パスと聞くと小難しく聞こえるかもしれませんが、簡単に言えば、アドレスです。
パスはPASS(パスワードとかですね)ではなくPATH(通り道)というスペルの方です。
つまり、インターネットの通り道、URL(アドレス)のことを指している訳です。

それでは「絶対パス」と「相対パス」とは？

「絶対アドレス」とは「原点からのパス」ということです。

インターネットの原点とは「http://」、ここです。
つまり、僕のページでいえば、
旧タイトル画像を表示したい時、画像ファイルのある位置まで「絶対パス」で指定すると、

「http://mobatuku.com/img/image002.gif」

となります。
<img src=http://mobatuku.com/img/image002.gif>


では、現在のページ(http://mobatuku.com/030/010/)から、
「相対パス」で指定すると？

「../../img/image002.gif」

となります。
<img src=../../img/image002.gif>


これでもちゃんと表示されてますよね？

「相対パス」とは自分自身から、呼び出したい相手の場所を指定します。

「絶対パス」は原点から
「相対パス」は自分自身から

図で体感的に覚える方が楽です。

■  mobile
┣■  index.html
┣■  top.html
┣■  image001.gif
┗■  img
     ┣■  image002.gif
     ┗■  sub.html

http://mobatuku.comに、
「mobile」というディレクトリの中に以下のものが入っているとします。
例えば、「index.html」に「img」ディレクトリの中にある画像「image002.gif」を表示したい場合、

絶対パス：<img src=http://mobatuku.com/img/image002.gif>
相対パス：<img src=img/image002.gif>

となります。
また、「img」ディレクトリにある「sub.html」に「image001.gif」を表示したい場合、

絶対パス：<img src=http://mobatuku.com/img/image002.gif>
相対パス：<img src=../image001.gif>

「../」は一つ上のディレクトリを指しています。
つまり「sub.html」は「img」ディレクトリの中にありますが、「image001.gif」は「img」ディレクトリと同じ場所にありますね？
要するに「sub.html」から「image001.gif」は一つ上に階層にいることになります。
「相対パス」を使う上で覚えることは、
ディレクトリの中を指定する場合は、「/」で区切る
一つ上の階層を指定する場合は、「../」で区切る
の二つだけです。

申し遅れましたが、
なぜ、「絶対パス」と「相対パス」を覚える必要があるかというと、
自分のサイト内でのリンク、画像の貼り付けの場合、「絶対パス」で指定すると、
ファイルを先にアップロードしない限り、貴方のパソコン上で確認しようとしても表示されません。
無いものを指定しても、表示されるわけがありません。
しかし、「相対パス」で指定すると、自分の位置から相手を探すので、アップロードしていなくても、 貴方のパソコンにそのファイルがあれば、道順通りに見つけてくれるので、アップロード前の確認ができるわけです。

しかし、違うサイトにリンクする場合は、「絶対パス」でないといけません。
なにせ貴方のパソコンに他サイトのファイルはありませんので…。
つまり、自分のサイト内のことは「相対パス」、
他サイトのことは「絶対パス」という使い方をするのが理想ということです。
長々とご説明失礼しました^_^;