今回は相対パスと絶対パスの書き方のちがいを、わかりやすく図を見ながら学んでいきます。
一回理解するとそんなに難しくないのに、初心者のうちはなかなかわかりづらいのが、このパスの概念です。
パスとはどんな役割があって、それぞれの違いやメリット、デメリットを見て正しく使いこなせるように頑張りましょう！
もくじ
パスとはなに？
そもそもパスとはどんな意味なのでしょうか？
英語では‘path’と書いて直訳すると‘小道’という意味です。
HTMLなどのWEBの世界では、目的のファイルがどこにあるのか道筋として記します。
これまで学んできた、imgタグで画像を呼び出したり、aタグで外部のサイトにリンクを付けたり、現在いるファイルから外のファイルを使いたいときに指定するのがパスなのです。
相対パスとは
自分のサイト内のファイルを指定したいとき、実際のお仕事ではこの相対パスよくが使われます。
相対パスは呼び出し元のファイルから見て、指定したいファイルがどこにあるかを指定するのです。
サイトが複雑になればなるほど、フォルダやファイルの階層が深くなるので、慣れないうちは頭を悩ませるのがこの相対パスです。
同じフォルダにあるファイルの指定
図のような、同じフォルダにある’fruits.html’というファイルで、’apple.jpg’という画像を表示したいとします。
これはとてもかんたんです。
もし、呼び出すファイルと指定したいファイルが同じフォルダ内にある場合はそのまま
apple.jpgと書くだけです。
例えば画像として指定したい場合は
<img src="apple.jpg">となります。
同じ階層のちがうフォルダの中にあるファイルの指定
次はこんな構造だとどうなるのでしょうか？
‘index.html’から見て、’apple.jpg’は別の’image’というフォルダに入っていますね。
いちばん大きなフォルダ’website.com’から見ると、‘image’と’index.html’はフォルダとファイルという違いはあるのですが、階層としては同じところにあると言えます。
（’website.com’に入って、どちらもすぐにある）
現在位置は同じなので、imageのフォルダから１つ階層を下に入りたいのですが、
フォルダ名/
で下に移動することができます。
- image/でフォルダの中に移動
- 同じフォルダにゴールとなるapple.jpgがあるので、
そのままapple.jpgとファイル名を指定 - 道筋をつなげると、相対パスはimage/apple.jpgとなる
呼び出すファイルも指定のファイルも違うフォルダにある場合
だんだん複雑になってきますが、このような場合はどうでしょうか？
‘fruits.html’で、’apple.jpg’を指定しようとしています。
‘apple.jpg’に行くには、１つ階層を上がらなければいけません。
１つ階層を上がるのは、
../（ドットが２つとスラッシュ）
であらわします。
下に移動するときと違い、上の移動はフォルダ名は書く必要はありません。
- ../で1つ上の階層に移動(フォルダ’blog’から出る)
- image/で1つ下に階層を移動する(フォルダ’image’に入る)
- 同じフォルダにゴールとなるapple.jpgがあるので、
そのままapple.jpgとファイル名を指定 - 道筋をつなげると、相対パスは../image/apple.jpgとなる
この
フォルダ名/（階層を下に移動）
と
../（階層を上に移動）
を理解するとどんなに複雑なファイル構造でも、相対パスで表現できるようになります。
ちょっとむずかしい例で考えてみましょう。
ファイル間の距離がとても遠く、考えただけで頭が痛くなりそうですね。
でも心配ご無用です。
スタート地点とゴール地点、そして現在地を意識しながら1歩1歩進んでいくと、必ずたどり着くことができますよ！
- ../で1つ上の階層に移動(フォルダ’food’から出る)
- ../で1つ上の階層に移動(フォルダ’blog’から出る)
- image/で1つ下に階層を移動する(フォルダ’image’に入る)
- fruits/で1つ下に階層を移動する(フォルダ’fruits’に入る)
- 同じフォルダにゴールとなるapple.jpgがあるので、
そのままapple.jpgとファイル名を指定 - 道筋をつなげると、相対パスは../../image/fruits/apple.jpgとなる
- 相対パスのスタート地点は呼び出し元のファイルの場所
- 相対パスは同じサーバの中のファイルだけを指定することができる
- 同じフォルダにあるファイルはファイル名だけで指定できる
- 階層を下に移動するにはフォルダ名/と書く
- 階層を上に移動するには../と書く
絶対パスとは
さて、次は絶対パスについて説明していきます。
今作業しているファイルから、指定のファイルまでの道筋が相対パスであったのに対し、絶対パスはどこにいても常に同じスタート地点から目的のファイルまでのルートです。
スタート地点となるのが、ルートディレクトリと呼ばれる、いちばん大きなフォルダになります。
スタート地点が同じなので、呼び出し元のファイルの場所に関係なく、パスは常に同じになるのが特徴です。
index.htmlやfruits.htmlのように違うファイルでの呼び出しも、apple.jpgの絶対パスは常にいっしょです。
ルートディレクトリは、http://ドメイン名やhttps://ドメイン名に当たる部分です。
図の例だとhttp://website.comにあたる部分ですね。
すなわちURLそのものも絶対パスであると考えることができます。
絶対パスだと外部のサーバにあるページやファイルも指定することができるようになります。
例えばアンカータグで外部のサイトにリンクしたいときは、自分のサイトと相手のサイトは根本的にちがう場所にいるので、かならず絶対パスで指定します。
<a href="https://www.google.com">グーグルのサイト</a>- ルートディレクトリからファイルまでの道筋をあらわしたのが絶対パス
- スタート地点が同じなので、呼び出し元のファイルの場所に関係なく絶対パスは常に同じになる
- 外部サーバにあるページやファイルも指定できる
相対パスと絶対パスの使い分け
相対パスと絶対パスの書き方をみてきましたが、それぞれどのように使い分けたらいいのでしょうか？
一般的には、同じサーバ内のファイルは相対パス、外部のサイトのページやファイルは絶対パス、のように指定することが多いです。
それぞれのメリットとデメリットをみて、理由を考えていきましょう。
相対パスのメリットとデメリット
- ドメインが変わっても書き直す必要がない
- 短く記述することができる
- 慣れるまではファイルがどこかわかりにくい
- 外部のサーバにあるファイルやURLは指定することが出来ない
絶対パスのメリットとデメリット
- 最初から最後まで明示的に場所が書いてあるので、初心者のうちはわかりやすい
- 外部サーバのファイルやURLなども指定することができる
- ドメインが変わるとすべて書き直す必要がある
- 記述が長いので書くのが面倒
サイト内のファイルの指定に相対パスを使ういちばんのメリットは、もしサイトの引っ越しをしてドメインが変わっても、ファイルの構成が同じであるかぎり、パスを書き直す必要がないことです。
サーバを乗り換えて、website.comからwebsite.jpにドメインが変わったらどうなるのでしょう？
もしすべてのパスを絶対パスで書いていたら、
website.com/
の部分が無効になるためすべて
website.jp/
と書き直す必要が出てきます。
大きなサイトだとパスを書く場所がとても多いので、すべて書き直すのはたいへんですよね？
最初はよく相対パスを間違えるのですが、とても重要になるので何度もこのレッスンを読んで、理解できるようにしてくださいね！
まとめ
- パスとは指定したいファイルまでの道筋をあらわす
- 相対パスは呼び出し元のファイルから、絶対パスはルートディレクトリからの道筋
- /フォルダ名、../で階層間を移動することができる
- 絶対パスは外部サーバにあるファイルも指定できる
- それぞれの特徴を理解して、適切に使い分けるのが大切