絶対パスと相対パスという考え方

この記事は、「ローカル（PC)環境を構築しよう」の
補足解説です。

HTMLを学ぶ上では絶対必要と言っても過言ではない、
絶対パスと相対パスの考え方について、纏めてみました。
始めての方にもイメージしやすいように、アプローチの仕方を
少し変えてます。

１．イメージしてみよう

　具体的な解説をする前に、ちょっと一例を挙げてみましょう。

　ある人物（ぽあろ）の家の中にあるチョコレートを、２種類の言い方で表してみます。

　　　　　

テーブルにチョコレートがある
ぽあろの家のリビングのテーブルにチョコレートがある

　どちらも同じ物を表しているのに、どうして言い方に違いがあるのでしょう？
　その理由は、ぽあろの家の中を知っているか否かにかかっています。

　自分が『ぽあろ』で、一緒に住んでいる『へいすてぃんぐず』との会話で
　考えてみましょう。

　

　「テーブルの上にあるチョコレート、
　　　捜査に必要になりそうだから、とって来てくれたまえ。」

　「えっ？そうなの？　もう食べちゃったよ。」

　この会話が成立するのは、お互いがぽあろの家にリビングがあり、そこにテーブルがあり、
　そのテーブルの上にチョコレートがあるのを知っているからです。
　なので、テーブル、チョコレートのキーワードだけで話が通じています。

　一方、『ぽあろ』と交友がない『ほーむず』との会話を想定してみましょう。

　

　「テーブルの上にあるチョコレート、
　　　　　　　　推理に必要だから取ってきてくれないかね？」

　「はぁ？何言ってるの？　どこのテーブルだよ。」

　というふうになって、会話が成立しません。
　何故なら、『ほーむず』はぽあろの家の中の状況など全く知らないからです。

　Webサーバー上にあるHTMLをローカル環境にそのまま持ってきた場合、
　画像がうまく表示されないことがあります。
　その原因は、上記のように、お互いのことを正しく認識していない状態に
　陥ってる可能性が高いです。

　上の例で言い換えると、次のような関係になります。

　　

　『ぽあろ』と『へいすてぃんぐず』は、勿論、勝手知ったる自分の家なので、
　ぽあろの家のどこにどんな物があるか熟知しています。

　一方、『ほーむず』は自分の家に住んでいます。自分の家には、自分のレイアウトがあります。
　いきなりぽあろの家の状況を話されても、解りっこないのです。

　これが、Webサーバー上のHTMLをローカル環境で起動した場合に、
　画像が正しく表示されない多くの理由です。

２．どうすれば解決するのか？

　では、再び例に戻るとしましょう。
　『ぽあろ』と『ほーむず』の会話が成立するためにはどうすれば良いのでしょう？

　解決方法は２つあります。

　　　１）もっと詳しい状況を『ほーむず』に説明してあげる
　　　２）『ほーむず』の家のレイアウトを『ぽあろ』の家と同じにしてしまう

　それぞれを詳しく見ていきましょう。

　１）は詳しく丁寧に『ほーむず』に状況を説明してあげるのです。

「私の家はロンドンのホワイトヘブン・マンションにあるんだが、
　推理に必要なチョコレートをリビングのテーブルに置き忘れてしまった。
　取ってきてもらえないだろうか？」

　

　「Ｏｋ、わかった。」

　こんな感じですね。
　『ほーむず』をパシリに使う『ぽあろ』。そんな『ぽあろ』を見てみたい(∀｀*ゞ)ﾃﾍｯ

　２）は現実的に考えると突拍子もないことですが、とりあえずここはそういうものだと
　思っていただいて

　こうすれば、お互い家の中が同じなので、どこに何があるか理解できますよね。
　「テーブルのチョコレート」で話が通じるのです。

　　

　上記に挙げた２つの例。これは、絶対パスと相対パスと言われる考え方です。
　ポイントは、自分の居場所をどう認識しているかという点です。

　　１）絶対パス

　　１）の例では、詳細に自分の家の場所・状況を説明することにより、
　　絶対的（誰が聞いても解るよう）に目的の場所を伝えています。

　　これは、視点を世界というグローバルなものに変えたのです。

　　　

　　HTML上では、「http:」で始まるアドレスの事です。

　　２）相対パス

　　２）の例では、『ぽあろ』と『ほーむず』の家を同じレイアウトにすることにより、相対的に
　　（ぽあろの家のリビングからの）目的の場所を伝えています。
　　つまり、『ほーむず』の視点をぽあろの家のリビングにしたのです。

　　　

　　HTML上では、「img/sample.jpg」のようなコードの事です。

　絶対パスと相対パス、何となくイメージが沸きましたでしょうか？

３．絶対パスでの解決法

　では、絶対パスと相対パスの概念が解ったところで、具体的なコードを見てみましょう。
　ここでは、WebサーバーのHTMLをローカル環境に持ってきた場合を想定しています。

　例えば、HTMLコード内に、以下のような画像を表示する記述(img …）があったとします。

　これだけの情報（パス）では、ローカル環境のHTMLが画像の場所を見つけることが
　できません。
　つまり、このコードはWeb サーバーの構造が解っている前提（相対パス）で
　書かれているのです。

　これを絶対パスに修正してみましょう。

　まずは、対象の画像のURLリンクを調べなければなりません。
　ここでは、主要な３つのブラウザにおける調べ方を紹介します。

　　１）InternetExplore

　　