今回のポイント
以前解説したリンクですが、同じ階層内でリンクを指定していました。
しかしこれだけでは、他の階層へのリンクはできません。
そこで今回はそれらを実現する為に、絶対パスと相対パスについて解説していきます。
そもそもパスとは
パスとは「Path」、つまり日本語に訳すと「経路」のことです。目的のファイルがどこのフォルダに保存されているのかを示す道順のようなものです。ウェブサイトのアドレス（Adress：住所）も、このパスの一種です。
絶対パスとは
絶対パスとはフルパスとも呼ばれており、ルートディレクトリと呼ばれる階層構造の頂点から目的地までの経路を表しています。ユーザが現在どのフォルダで作業中であっても、常に同じスタート地点から、常に同じ経路の表示になります。
外部リンクなどがこれにあたります。
例えばyahoo!にリンクとか、ある人のブログ記事へリンクなどです。
絶対に変わらないアドレスという認識で良いと思います。
相対パスとは
相対パスとは、ユーザが現在作業しているフォルダから目的のフォルダまでの経路を表します。スタート地点が異なると、当然この経路も異なります。
そしてこの相対パスは以下のように覚えると理解しやすいと思います。
- 同じ階層への相対パス
- 下の階層への相対パス
- 上の階層への相対パス
それでは、それぞれの相対パスについて解説していきます。
同じ階層への相対パス
これは以前、リンクで解説した時のケースです。
以下の記事を参照してもらえると、理解できます。
ちなみに、階層を図で説明すると以下の通りです。
index.htmlとa.htmlはhtmlフォルダ内の同じ階層にあるという解釈で良いです。
しかし、index.htmlからb.htmlやc.htmlへは違うフォルダ内へのリンクとなるので同じ階層とはなりません。
このような場合は次項から解説する相対パスとなります。
同じ階層への相対パスを記述してみる。
上の図のindex.htmlからa.htmlを指定するような以下の記事があったとします。
a.htmlを参照
この場合にリンクを指定する場合は、以下のように記述します。
<a href=”a.html”>
a.html
</a>
を参照
これはリンクを表すa要素を使用して記述しました。
a要素についての解説は以下の記事を参考にして下さい。
下の階層への相対パス
下の階層への相対パスについて解説します。
まずは以下の図を参照下さい。
この場合、index.htmlからb.htmlを見るとBフォルダを通ることになります。
この時、「Bフォルダの中に入ってb.htmlを指定する」という内容を記述する必要があります。
このような場合、下の階層へ相対パスを指定するということになります。
下の階層への相対パスを記述してみる。
それでは下の階層へ相対パスを記述してみましょう。
以下のような記事があったとします。
b.htmlを参照
この場合にリンクを指定する場合は、以下のように記述します。
<a href=”B/b.html”>
b.html
</a>
を参照
これはリンクを表すa要素を使用して記述しました。
a要素についての解説は以下の記事を参考にして下さい。
href属性の内容を解説します。
B/b.htmlと記述しましたが、これはBフォルダを通ってb.htmlをリンクという意味になっています。
フォルダ名Bとファイル名b.htmlを/（スラッシュ）で区切ることで、指定できるといった具合です。
上の階層への相対パス
今度は先程の逆です。
b.htmlからindex.htmlへの相対パスを解説していきます。
以下の図を参照下さい。
この場合、b.htmlからindex.htmlを見るとBフォルダを通ることになります。
この時、「Bフォルダから外に出てindex.htmlを指定する」という内容を記述する必要があります。
このような場合、上の階層へ相対パスを指定するということになります。
※b.htmlから一旦Bフォルダから外に出る。
すなわち「上の階層に行く」と覚えるとイメージが湧くと思います。
上の階層への相対パスを記述してみる。
それでは上の階層へ相対パスを記述してみましょう。
以下のような記事があったとします。
index.htmlを参照
この場合にリンクを指定する場合は、以下のように記述します。
<a href=”../index.html”>
index.html
</a>
を参照
これはリンクを表すa要素を使用して記述しました。
a要素についての解説は以下の記事を参考にして下さい。
href属性の内容を解説します。
../index.htmlと記述しましたが、これはBフォルダから出てindex.htmlをリンクという意味になっています。
フォルダから外に出て”..”とファイル名index.htmlを/（スラッシュ）で区切ることで、指定できるといった具合です。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
