【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

web兄さん

htmlでファイルの読み込みをするのに必要な絶対パスと相対パスの書き方についてイラストを使ってわかりやすく解説します。この記事を読むことで「そもそもパスとはなにか？」という基本から「絶対パスと相対パスのそれぞれの使い方と違い」をしっかりと理解し、実際のweb制作に活かすことができます。

追記：３つ目のパスの書き方「ルート相対パス」メリットと使い方についても解説しています。

そもそもパスとは？

絶対パスや相対パスを勉強するまえに「そもそもパスとはなんだ！？」という方も多いと思うので、まず「パス」について解説していきます。

パスとは特定のファイルの場所までの道筋を記述したものです。

htmlではaタグのリンク先だったり、imgタグのsrc属性（読み込むファイルの場所）に書かれているものがパスですね。

画像の赤色の部分がパスです。

そして、この「パス（ファイルまでの道筋）の書き方の種類」として

絶対パス
相対パス

の２つがあり、状況に応じて書き分けをしていきます。

絶対パスと相対パスのカンタンな違い

詳しくは後述しますが絶対パスと相対パスの違いは見た方がイメージしやすいので、簡単な例を載せておきます。

絶対パス： https://webliker.info/wp-content/themes/template/img/common/logo.png
相対パス： ../img/common/logo.png

「logo.png」というファイルへのパスを「絶対パス」「相対パス」それぞれで書いた場合です。パッと見ても違うことがわかりますね。

なぜパスを覚える必要があるの？

パスが「ファイルまでの道筋」ということがわかりましたが「なぜパスを書く必要があるの？」という疑問がありますよね。実際のhtmlでの使用例をもとに解説していきます。

htmlを書く時にはファイルを読み込む場面がいくつかあり、その都度パスを必ず書きます。たとえばhtmlで画像表示するimgタグではsrc属性（イラストの「=”〜〜”」の部分）という箇所にパスを記述しなければいけません。

コンピューターはあなたが表示したいファイルがどこにあるのかを知らないので教えてあげなければいけないからです。

パスをきちんと書くことでコンピューターがファイルまでの道筋を辿り、ファイルを読み込むことができます。パスはコンピューターがファイルに辿り着くための「住所」の役割であると覚えておきましょう。

どんなファイルの読み込みでパスを書く？

画像ファイルの読み込み以外では、どんなシーンでファイルの読み込みを行うのかを紹介します。

htmlでは画像ファイル以外にもwebページの見た目を調整するためのcssファイルやアニメーションを実装をするためのjavascriptファイルを読み込む必要がありますが、そういったファイルを読み込む場合にもパスを記述します。

webページ内にあるテキストやボタンのリンク先にもパスを書きます。パスを書くことで、ブラウザがどのページに遷移すればよいかを判断することができます。

絶対パスの使い方

パスの概念がわかったところで、パスの書き方の一つである絶対パスについて解説していきます。まずは絶対パスの書き方を見て見ましょう。

絶対パスとは「絶対に変わることのないファイルの住所」です。そのため「どのドメインの、どのフォルダの中の、どのファイル」をすべて書く必要があります。階層が深くなるごとに「スラッシュ」で区切ります。

ドメインとは？

ドメインとはwebサイトの「〇〇.com」や「〇〇.co.jp」の部分です。
詳しくは「【基本のき】ホームページの仕組みをイラスト付きでまるっと解説！」の「ドメインとは」を読んでみましょう。

絶対パスの例

それでは実際に絶対パスを使ってhtmlで画像ファイルを読み込む時の例を見てみましょう。webページでapple.pngという画像ファイルを表示するとします。

ディレクトリ構造（フォルダ構造）を見てみると「apple.png」は「fruits.comのimgフォルダの中」にあります。よってimgタグのsrc属性に記述する絶対パスは

<img src="http://fruits.com/img/apple.png">

となります。

このように絶対パスでファイルを読み込む時はフォルダ構造をしっかりと理解して書く必要があります。フォルダ構造（ディレクトリ構造）についてはこちらの記事で学習しましょう。

関連記事ディレクトリ構造とは？WEBサイトのファイルはどうなっている？

相対パスの使い方

２つ目の書き方である相対パスについて解説していきましょう。

絶対パスはその「フォルダが保管してある一番上の階層からすべて書く」というルールでしたが、相対パスでは「表示したいページ」から見て「読み込みたいファイルがどこ」にあるか？を基準にしてパスを記述します。

表示したいファイルからみて、読み込みたいファイルが上のフォルダ階層にある場合は「../」を記述します。どういうことかは実際の例をみて確認してみましょう。

相対パスの例その１

今回は例として「apple.html」というページで「apple.png」という画像ファイルを表示する時の相対パスを書いてみます。

apple.pngはapple.htmlから見て、一つ上の階層にあるimgフォルダの中に入っていますね。そのため「..」を一つ書きapple.htmlから「一つ上の階層」という指定をしなければいけません。

よってこの場合の相対パスは

<img src="../img/apple.png">

ということになります。

相対パスの例その２

相対パスは難しいのでもうひとつ別の例を紹介します。

index.html（トップページ）で「lemon.png」というファイルを読み込みたい場合の相対パスを考えてみましょう。

lemon.pngはindex.htmlからみて「同じ階層にあるimgフォルダの中」にありますね。基準とするページと同じ階層であれば「..」を書く必要はありません。

そのため、相対パスの正解は

<img src="img/lemon.png">

となります。

「./」と「../」の違いは？

ドットが１つである「./」は同じ階層を表します。つまり先ほどの例でいえば、同じ階層であるimgフォルダを書く場合「./img」という書き方もできるというわけです。

しかし、わざわざ「./」を書かなくてもフォルダ名だけで同じ階層であることを表すことができるので、「./」は読めるだけで覚えなくてもOKです。

相対パスのその他のパターン

相対パスのその他のパターンも紹介しておきます。

index.htmlの２つ上の階層のimgフォルダのlemon.png→「../../img/lemon.png」
index.htmlと同じ階層のimgフォルダの中のfruitsフォルダのlemon.png→「img/fruits/lemon.png」
index.htmlの3つ上の階層のimgフォルダの中のfruitsフォルダのlemon.png→「../../../img/fruits/lemon.png」