[10] 絶対URL と 相対URL(絶対パス と 相対パス)

このページは全面書き直しました(更新日:2017年5月8日)

URLとは、ファイルの住所みたいなもの。
URLは「Uniform Resource Locator」の略。直訳すると「リソースの位置を示す形式」ってなかんじかな。
例えば画像を表示させたい時は、その画像ファイルの位置をHTML上で指定する必要があります。
このファイルの位置を表すのがURLです。

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

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

絶対パス

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

http は、Hypertext Transfer Protocol の略。ブラウザとサーバの間の通信の作法のようなものです。
https は、httpが暗号化されているヤツね。

HTMLファイルを置いている場所以外のサーバから、他のファイルを表示させる時や、 別サーバにあるファイルへリンクするときには、この絶対パスを使います。
もちろん同じサーバ内の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にリンクを貼って、他のページにジャンプ(ページ遷移)してみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

Re: 図と本文で拡張子が違っています

vertさん。
gifとなっていたところをjpgに直しました。
教えてくださってありがとうございます〜(^o^)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.