[10] 絶対URL と 相対URL（絶対パス と 相対パス）

URL（ユーアールエル）とは、ファイルの住所みたいなもの。
URLは「Uniform Resource Locator」の略。直訳すると「リソースの位置を示す形式」ってなかんじかな。
例えば画像を表示させたい時は、その画像ファイルの位置をHTML上で指定する必要があります。リンクを貼って他のページにジャンプさせるときも、そのHTMLファイルがある位置を指定してあげないといけません。
このファイルの位置を表すのがURLです。

URLには 絶対URL と 相対URL の2通りの形式があります。

ファイルの位置を示す文字列を「パス（path）」と呼ぶので、絶対パス、相対パスって言っても ここでは同じ意味です。

絶対パス

これは「http://」で始まる指定形式です。「https://」ってのもあります。

http は、Hypertext Transfer Protocol の略。ブラウザとサーバの間の通信の作法のようなものです。
https は、httpが暗号化されているヤツね。Googleが推奨してるので今後これが主流になりそう。

別サーバにあるファイルへリンクするときには、この絶対パスを使います。
もちろん同じサーバ内のHTMLファイル同士や画像ファイルなどを、この絶対パスで指定してもOK。
絶対パスの使用例はこんなかんじです。

<img src="http://www.ex.com/images/forest.jpg" alt="森の写真" >
<a href="http://e-words.jp/w/HTTP.html" target="_blank">httpとは</a>

◯絶対URLのメリット

• ファイル間の相対的な位置関係を考えずに書けて間違いが少ない。
• ビジターがサイトのアーカイブを取った時にも表示がわかりやすい。

▲絶対URLのデメリット

• オフライン（ネットが接続してない）のとき表示されない。

ドキュメント相対パス

こちらは同じサイト内のファイルの位置関係を相対的に示す形式。
現在のHTMLファイルを起点にして、階層が上か下か、どんな名前の階層か、その中のどの名前のファイルかを書きます。

階層はディレクトリとも言います。「フォルダ」だと思ってください。

起点になるファイル（現在編集しているファイル）がいる階層を、カレントディレクトリと言い、「./（ピリオドとスラッシュ）」で表します。
この「./」は省略できます。

階層は「/（スラッシュ）」で区切ります。
現在のファイルより下の階層は、/で区切ってディレクトリ名を書いていきます。
現在のファイルより上の階層を示すには「../（ピリオド2つとスラッシュ）」を使います。

同じ階層のファイルを示す

ファイル名　または　./ファイル名

1つ下の階層のファイルを示す

ディレクトリ名/ファイル名　または　./ディレクトリ名/ファイル名

2つ下の階層のファイルを示す

ディレクトリ名/ディレクトリ名/ファイル名
または
./ディレクトリ名/ディレクトリ名/ファイル名

1つ上の階層のファイルを示す

../ファイル名

2つ上の階層のファイルを示す

../../ファイル名

1つ上の階層の別ディレクトリのファイルを示す

../ディレクトリ名/ファイル名

わかりづらいと思いますので、下の例で説明します。
「aaa.html」が現在編集しているHTMLファイルだとします。

「aaa.html」から他のファイルへのドキュメント相対パスは、下記のようになります。

「bbb.html」へ

bbb.html　（または　./bbb.html）

「xxx.gif」へ

image/xxx.gif （または　./image/xxx.gif）

「yyy.jpg」へ

image/new_image/yyy.jpg　（または　./image/new_image/yyy.jpg）

「ccc.html」へ

../ccc.html

「ddd.html」へ

../../ddd.html

「zzz.gif」へ

../../image/zzz.gif

ドキュメント相対パスのメリット・デメリットはこちら↓

◯ドキュメント相対URLのメリット

• オフライン状態でも自分のPC内で指定でき、ブラウザ表示できる

▲ドキュメント相対URLのデメリット

• ファイル間の相対的な位置関係を考えて書くのでややこしい（笑）

自分のPCでの作業環境（ローカル環境と言います）でHTMLの編集をしている時、フォルダを作って、その中で各ファイル同士のリンクを指定していきます。そのときは当然このドキュメント相対パスで作業します。絶対パスは使えないからね。
（すでにサーバに上がってるファイルにリンクさせるときは、もちろんローカルでも絶対パスでOK）

サイトルート相対パス

これは「絶対パス」「ドキュメント相対パス」のイイとこ取りの書き方です。

サイトルート（サイトの第一階層。トップページの index.html を置く階層）を「/（スラッシュ）」で表し、そこから絶対パスのように書きます。
「../」が何個も重なって「あれ？これで当ってるっけ？」という疑念から解放されます（笑）

先ほどの図のファイルの サイトルート相対パスはこんなかんじ。

「aaa.html」

/news/files/aaa.html

「bbb.html」

/news/files/bbb.html

「xxx.gif」

/news/files/image/xxx.gif

「yyy.jpg」

/news/files/image/new_image/yyy.jpg

「ccc.html」

/news/ccc.html

「ddd.html」

/ddd.html

「zzz.gif」

/image/zzz.gif

サイトルート相対パスのメリット・デメリットはこちら↓

◯サイトルート相対パスのメリット

• 絶対パスと同じようにルートからのパスなのでわかりやすい

▲サイトルート相対パスのデメリット

• ローカル環境でのブラウザ表示がむずかしい

画像など、ローカルでブラウザ表示で確認したいものが表示できないので、サーバ上にテスト環境を作るなどしなくてはならないので、ちょっと面倒。

じゃあWebサイトを作るときはどっちを使うの？

Webサイトを作る時、ローカル上では「ドキュメント相対パス」で作るのが基本。やりやすいから。
相対パスで作ったセットをそのままサーバにアップすれば、ファイルの関連性はそのままなので、問題無いし。
ただ、同じサーバ内に無い、別ドメインにあるファイルへのリンクなら、絶対パスでしか貼れません。

もちろん、ローカルでの作業中も、全部絶対パスで組んでもOK。
ただしこの場合、そのドメインのサーバ上にファイルが存在しないと、ブラウザプレビューで確認できないので、作業がやりづらいかな。

サーバ上で作業する環境なら、サイトルート相対パスがいいかも。
絶対パスと似ていますが、例えば万が一ドメインを変えた時（ってそんなこと滅多に無いだろうけど）でも、サイトルート相対パスなら問題無いので。

WordPressの場合は、ドキュメント相対パスで作った部分を WordPressのタグで 絶対パスに置き換えることもできます。

とにかく、ローカルでの作業なら ドキュメント相対パス が基本ですかね。
で、同じサーバ内に無い、別ドメインにあるファイルへのリンクなら、絶対パスで貼ると。

次回予告

ちょっと今回は、急に専門用語がたくさん出てきてしまいましたね。
HTMLを書く時にぜったい関わらなきゃいけないのが URLなので、早めに解説しておきました。

次回は、専門用語ついでに「index.html」という名のファイルについてメモってます。
その次の回で HTMLにリンクを貼って、他のページにジャンプ（ページ遷移）してみましょう。