相対パス、絶対パスってなに？

HPを作るときには、HTMLファイルに画像や音楽ファイルを貼り付けたり、ほかのHTMLファイルにリンクを貼ったりする、というのは前回までの話でわかりましたよね。このファイルを貼り付けたりリンクを貼ったりする際に、今回お話します「相対パス」と「絶対パス」を使うのです。ちなみに「パス」という単語はファイルやフォルダの住所を指す言葉です。

さて、聞いたことなくてなにやら難しそうな単語だと思っている方。ご安心ください。すでに半分は勉強済みなんですよ。

実は「絶対パス」というのは、インターネット上でのファイルやフォルダの住所を指す言葉です。どこかで聞いたことあるフレーズですが覚えていますか？

そうです、「ＵＲＬってなに？」でまったく同じ説明をしましたよね。もうお分かりだと思いますが、インターネットの世界ではＵＲＬ＝絶対パスなのです。インターネット全体で見て、そのファイルがどこにあるのかを指し示す絶対的な住所が「絶対パス」というわけです。

次に「相対パス」ですが、こちらの方が考え方は簡単です。相対パスとは、あるファイル（Ａ）から別のファイル（Ｂ）のパスを指定する際に、ファイルＡから見てファイルＢはどこにあるか、を示す方法なのです。

言葉にすると難しく感じますので、ゆっくり図を交えながら説明しましょう。

例えば、あるHTMLファイル（Ａ）から別のHTMLファイル（Ｂ）にリンクを貼りたいとします。そして、その二つのHTMLファイルが同じフォルダの中にあったとして下さい（下図参照）。

もちろんリンクの指定をＵＲＬ（絶対パス）「https://www.7key.jp/hp/b.html」で行うこともできますが、相対パスを使えばもっと簡単に指定することができるのです。指定するファイルが同じフォルダにある場合は

のようにファイルを指定することができます。

書式は「．（ピリオド）/（スラッシュ）ファイル名」となっており、もちろん全て半角文字で記述します。この「．/」は同じ場所を示す一種の記号のようなものです。同じフォルダの中にあるファイルは「同じ場所にある」ということですね。

ずいぶんと簡単に記述できますので使わない手はないです。しっかりマスターしましょう。

これを応用すれば、フォルダの中に指定したいファイルがある場合も、相対パスを使って指定することができます。

次のようなファイルとフォルダの構成の場合を考えてみましょう。「a.html」と「sample」というフォルダが同じ場所にあり、「sample」フォルダの中に「b.html」がある場合に、「a.html」から「b.html」にリンクを貼りたいとしましょう（下図参照）。少し考えてみて下さい。今までの知識で十分答えは出せますよ。

まず、「sample」フォルダは「a.html」と同じ場所にあるので、「a.html」から見た「sample」フォルダの中は次のように表せます。

そして、「sample」フォルダの中にある「b.html」にリンクを貼りたいので、答えは

となります。

更にその中にフォルダがあってまた更にその中にフォルダがあっても考え方は同じです。自分と同じ場所よりしたに指定したいファイルがある場合はこの方法で十分対応ができると思います。

では、リンクを指定しようとしているファイルが自分よりうえにあった場合はどうでしょう。イメージとしては下図のとおりです。

先ほどの例と逆のパターンですね。このような場合には次のように指定をします。

「．（ピリオド）．（ピリオド）/（スラッシュ）」で、今自分がいるフォルダより一つ上のフォルダを指す記号となっています。二つ上のフォルダを指そうと思えば「．．/．．/」になりますし、三つ上であろうが四つ上であろうが考え方は同じです。

ただ注意点として、「相対パス」で指定できるのは、あなたに与えられたWEBサーバ上でのフォルダの中だけです。つまり、自分が与えられているフォルダより上のフォルダは指定できないのが一般的です。

以上で「相対パス」の話は終わりですが、今回は念のため練習問題を用意しました。理解に不安がある人はチャレンジしてみて下さい。

次のようなフォルダ構造でファイルが配置されているとします。

答えは問題の上にマウスを重ねれば表示されます（JavaScriptをオンにして下さい）。