HTMLの相対パス、絶対パスを紹介します【HTML5実践編】
こんにちは、WEBマーケティングの杉尾です。
前回、画像ファイルを表示させるときに、「相対パス」という言葉を出しました。
これはファイルを参照するときに使う書き方の一つです。
『相対パス』の他に『絶対パス』という書き方があります。
今日はその2つについてお話しさせていただきます。
相対パス、絶対パスの考え方
相対パス
あなたが駅前で道を聞かれたとします。
その場所を知っていれば、あなたは恐らく駅からの道順を説明すると思います。
少し遠い場合でも、「何番系統のバスに乗って…」という風に答えると思います。
これが相対パスの考え方で、その場所からの位置関係を示したものです。
『パスを書こうとしているそのファイルから見た位置』ですね。
絶対パス
あなたが通販で商品を買ったとします。
その荷物を届けてもらうために、都道府県からの住所を言う、もしくは記入しますよね。
相手はあなたがどこにいるかわからないからです。
それが絶対パスの考え方で、『誰がどこから見てもわかるように位置を特定する』ものです。
どうして2つの書き方があるのか？
駅前で道を聞かれたときに、都道府県からの住所を言われてもすぐにはわかりませんよね。
その場所から近くても、一旦、地図を開く必要があります。
その手間と同じく、全て絶対ファイルで書かれると、その度ごとにドメインからIPを探し出し、サーバーからファイルを呼び出して…という感じで時間がかかります。
それを相対パスで書いておけば、探す手間が省けます。
その他にプログラミングにおけるセキュリティ上の問題もありますが、ここでは割愛します。
書き方
下図のような構成のサイトがあると仮定します。
index.htmlからimgフォルダ内のpic_1.jpgを呼び出したい場合、
相対パスでは、
<img src="img/pic_1.jpg">
もしくは
<img src="./img/pic_1.jpg">
とindex.html内に書きます。
（./はこの階層にあるという意味です）
絶対パスでは、
<img src="http://ドメイン名/img/pic_1.jpg">
とindex.html内に書きます。
では、pageフォルダ内にあるpage_1.htmlからpic_2.jpgを呼び出したい場合はどうかというと…
相対パスでは
<img src="../img/pic_1.jpg">
とpage_1.html内に書き、
絶対パスでは、
<img src="http://ドメイン名/img/pic_2.jpg">
とpage_1.html内に書きます。
絶対パスについては最上位階層からの指定ですから、もうわかると思います。
「http://ドメイン名/フォルダ名/ファイル名」といった書き方になります。
http://で始まるパスは、絶対パスと覚えておいてもいいと思います。
相対パスは少し考えないといけませんが、書き方さえわかれば簡単です。
同じ階層ならそのままフォルダ名（ファイル名）を書くか、『./』を先頭につけて指定します。
1つ上の階層なら、『../』を先頭につけます。
2つ上の階層なら、『../../』と書きます。
サイトルート相対パス
実はもう一つの書き方があります。
『サイトルート相対パス』と言われるものです。
大規模なサイトになると、下図のような構成になることがあります。
page.htmlでimgフォルダ内のimage.jpgを読み込もうとすると、こんな記述になります。
<img src="../../../img/image.jpg">
ちょっと長くなりますね。
でも、この書き方だと、仮にドメインが変わっても（テスト環境から本番環境に移したときなど）、パスを書き換える必要がありません。
とはいえ、まれにサイトの構成が変わる場合もあります。
そうなると、結局パスを書き換えることになります。
1人で管理しているならいいのですが、複数人のコーダーやデザイナーが関わるプロジェクトですと混乱を招くこともあります。
そういったときは初めから『サイトルート相対パス』を使うことに決めておくと作業が滞りません。
こんな書き方です。
<img src="/img/image.jpg">
『/』がルートディレクトリ（ツリー型ディレクトリ構造の最上層）を示しています。
上図の場合ですと、HPフォルダのことですね。
こうやって書いておけば、httpに始まるドメイン名を省略できますし、一目でどこにファイルがあるかわかります。
※ただし、サイトルート相対パスはローカル環境に構築している場合、正しく表示されません。
ローカルで見る方法もありますが、そこは割愛。
詳しくはコチラをどうぞ。参考:http://granshe.blog.shinobi.jp/Entry/135/
補足 『フルパス』
FTPソフトで見るとわかるのですが、ドメイン名と目的のフォルダ（もしくはファイル）の間に、別のフォルダが挟まっています。
『絶対パスで書くときにドメイン名の次にフォルダ名を…。あれ？』
そう思った方も心配しないでください。
これはウェブサーバーの設定で、途中のフォルダを省略しているからです。
外部からアクセスしてきたユーザーに知られたくない情報（各種設定）を見せないようにするためです。
外部にも公開しているフォルダは大体、『www』や『public』、『public_html』といった名前になっています。 絶対パスで書く場合、ドメイン名の次に来るのは、それらの下にあるフォルダ名ということになります。
それを省略せずに書くことを『フルパス』と言います。
まとめ
相対パス、絶対パス、サイトルート相対パスについて見ていただきました。
結局のところどれを使えばよいかという疑問を持たれたかもしれませんが、Webの現場では相対パスを使うことが多いと思います。
特別に指定がない場合、相対パスで書いておけば間違いないと思います。
サイト構成が変わるときだけ注意しておいてください。
最後までお読みいただき、ありがとうございました。
カテゴリー