絶対パス・相対パスとは？種類と違い、書き方について解説【初心者向け】

こんにちは、デジタルマーケティング研究所です。

この記事にたどり着いた方は、
「パスを理解したいけど、なんだかよくわからなくなってきた」
「パスって、漠然とわかるけど違いをおさらいしたい」
「結局どれを使って制作したらいいのかな？」
と考えている方が多いのではないでしょうか。

今回はWeb制作学びたてのころに躓きやすい、絶対パス・相対パスについてしっかり理解することを中心にパスの種類とそれぞれの違い、書き方について解説していきます。

そもそも“パス”って何なの…？

パスとは、特定のファイルまでの道のりのことを指します。

HTMLの場合でいうと、赤色部分のaタグのリンク先、imgタグのsrc属性（読み込みたいファイルの場所）に書かれているものが、パスになります。

HTMLにおいては、主に下記のタグで使用することが多いです。

• <a>タグのhref属性（リンク先）
• <img>タグのsrc属性（読み込みたいファイルの場所）
• <link>タグのhref属性（外部ファイルの読み込み）
• <script>タグのsrc属性（外部スクリプトのURL）

パスの指定方法には種類があり、書き方も異なるので記述する際は注意が必要です。

なんで“パス”を書く必要があるの…？

パスが特定のファイルまでの道のりということはわかりましたが
「でも、なぜパスで書く必要があるの？」という疑問を持つ方もいるのではないでしょうか。
それでは、なんでパスを書く必要があるのかWebサイト上でのよくある例をもとに解説していきます。

例えば「今見ているWebサイトで、なぜか特定の画像が表示されていない」という状況に出会ったとします。

この時ブラウザ上でなにが起こっているかというと
HTMLが「その画像だけ、どこにあるものなのか分からない、困った…」
というような状況に陥っているのです。

つまり、使う場面にあわせて適切に格納されている場所までの道のりを教えてあげないと、画像は表示されないということになります。

サイト全体が表示されていない場合は、パス以外の原因も考えられるのですが
画像もサーバー上にあげているのに一部だけ表示されていない場合は、パス記述が失敗している可能性が大きいです。

このように、画像に限らずWebページを構成する要素のひとつひとつをリンクさせるには、
使う場面によってパスを使い分け、ブラウザに場所がわかるように道のりを書いてあげることがとても重要になってきます。

パスの種類について

次にパスの種類について解説します。
パスには、みなさんがよく耳にする「絶対パス」「相対パス」を含むと４つの主に書き方があります。

• 絶対パス
• 相対パス
• ルートパス
• フルパス

使う場面によってこの4種類を使い分ける必要がありますが、
パス指定の中でも特に基礎となるのが「絶対パス」と「相対パス」です。
この絶対パス・相対パスをしっかり理解すると、おのずとルートパス・フルパスが理解できるようになります。

まずは基礎である「絶対パス」と「相対パス」をとある建物の場所に例えて解説します。

絶対パス

絶対パスは、例に当てはめると「住所さえわかれば、どんな人から見ても理解できる場所」となります。

△△□□ビルという場所に行きたいけどわからない、という人がいたとして
通りすがりのAさんに尋ねたら
「そのビルの住所は、東京都台東区上野〇-〇　△△□□ビル　だよ」と答えてくれた。
というように別の都道府県にいる人が見ても、そのワードで調べたら理解できるような場所というのが絶対パスです。

絶対パスの基礎知識

絶対パスを実際の専門用語を用いて説明すると
ドメインからファイルまでのディレクトリ構造を明確に指定するパスとなります。

この記述方法は、ユーザーがどのページにいても変わることなくファイルを表示することが可能です。

英語では「absolute path」と言います。

絶対パスの基本的な用途

どのパスにも使用されるような指定方法ではないため、
開発中に使用されている指定方法の割合としては少ないでしょう。
主にaタグのリンク先など外部サイトへのリンクを自分のサイトに記載したい場合に使用されます。

HTMLファイルを置いている場所以外のサーバーのファイルを表示させる、 別サーバーにあるファイルへリンクする時には、この絶対パスを使う必要があるのです。

相対パス

相対パスは例に当てはめると「今自分のいるところから、知る人ぞ知る方法で行ける場所」となります。

△△□□ビルに行きたいけどわからない、という同じ人がいたとして
通りすがりのAさんに尋ねたら「そのビルに行くには、今いる場所から次の信号を右に曲がって、こういう看板が右手に見えるのでそこを左に行ったところにあるよ」と今いる場所からの道のりを答えてくれた。
というように、どこからから見たときに、段階に準じて進んでいくとつける場所というのが相対パスです。

相対パスの基礎知識

専門用語を用いると、ユーザーの現在地を起点にして、目指すファイルが保管されている場所へのルート（階層構造）を示すパスです。

目的とするファイルまでの道順を表すのに「ユーザーが今いる場所」を基準とするため、
ユーザーがいる場所によって、ファイルの場所ごとに記述の内容が変化するところが特徴です。

英語では「relative path」と言います。

相対パスの基本的な用途

同一ドメイン内にあるファイルへの道のりは、絶対パスでも相対パスでもどちらでもあらわすことができますが、
相対パスの方が使用される頻度が高いです。

主に、画像へのパスや、内部リンクなど同一ドメイン内にあるファイルへの道のりを記載したい場合などで使用されます。

【応用編】ルートパス・フルパスについて

絶対パスや相対パスに似ている部分もあるため、混乱しがちなのがこの2種類です。

初心者の方にとっては使う機会がまだ少ないかもしれませんが、一応覚えたい！という人向けに解説します。
どちらもサーバー内で開発する時に使うことが多いので、将来的に使うことになるでしょう。

ルートパス

ルートパス（ルート相対パス）はドメイン名のみを省略して指定できるパスを指します。
本サイトで例えると「https://digital-marketing.jp」の部分を省略した表記になります。

ルートパスは、絶対パス・相対パス両方の良い部分を合わせたような仕組みで、
ドメインのみが変更された場合に修正は不要、開発時に使用するPC内でのサーバー環境など整っていればオフラインで作業したい場合でもそのまま扱うことができます。

フルパス

フルパスはサーバー内部の最上部からの正式なパスの事を言います。

一見、絶対パスと似ていますが

• 絶対パス：WEB上に公開されている上部からのパス
• フルパス：サーバー内部での上部からのパス

上記のように微妙に違いがあることが特徴です。

初心者の方は「絶対パス」「相対パス」をしっかり覚えておく

次の項目で書き方やメリット・デメリットについて解説しますが
このことについても、初心者の方はまずは「絶対パス」「相対パス」が何なのかを理解することが大切です。

ルートパス・フルパスについては使う機会はまだないかもしれないので、
前述で解説した内容をもとに、こういう種類もあったなということだけ理解しておきましょう。

それぞれの書き方とメリット・デメリットを解説

前項ではパスの種類について触れましたが、
今度はそれぞれの書き方やメリット・デメリットの違いについて触れていきます。

絶対パスの書き方

下記のようなディレクトリを想定して、絶対パスについて解説します。

上記の枠で囲ってあるファイルを読み込む場合はこのようにパスを書きます。

https:// ●●●●.com/images/△△△△△.jpg

これが絶対パスになります。

絶対パスのメリット・デメリット

絶対パスのメリット・デメリットは下記が考えられます。

メリット

• 誰が見ても、どこに何があるのかわかりやすい

デメリット

• ローカル環境(サーバーにUPしないで自分のPC内での作業)で制作ができない
• 書く文字数が相対パスよりも圧倒的に長くなるので時間的コストがかかる
• 文字数が多くなるので、ソースコードがわかりにくく・見づらくなる
• サイトの引っ越しを想定している場合、リンクもすべて修正しなくてはならない

相対パスの書き方

相対パスも下記のようなディレクトリを想定して解説します。

同じフォルダ内にあるファイルを参照する

［index.html］から画像ファイル［logo.png］を参照する場合、参照元ファイルからみて参照先ファイルは同じディレクトリ内に存在しています。その場合には下記のようにあらわします。

<img src="logo.png">

同じフォルダ内にある特定のフォルダのなかのファイルを参照する

［index.html］から画像ファイル［banana.jpg］を参照する場合、参照元ファイルからみて参照先ファイルは同じディレクトリ内にある［images］ディレクトリのなかに存在しています。その場合には下記のようにあらわします。

<img src="images/banana.jpg">

ひとつ上のフォルダ内にある特定のフォルダのなかのファイルを参照する

［about.html］から画像ファイル［banana.jpg］を参照する場合、参照元ファイルからみて参照先ファイルはひとつ上のディレクトリ内にある［images］ディレクトリのなかに存在しています。その場合には［../］をつけて、下記のようにあらわします。
この［../］という記述はひとつ上の階層に移動するという意味をもちます。

<img src="../images/banana.jpg">

ふたつ上のフォルダ内にある特定のフォルダのなかのファイルを参照する
［banana.html］から画像ファイル［banana.jpg］を参照する場合、参照元ファイルからみて参照先ファイルはふたつ上のディレクトリ内にある［images］ディレクトリのなかに存在しています。その場合には［../］を連続してつけて、下記のようにあらわします。
この［../../］という記述はふたつ上の階層に移動するという意味をもちます。以降は3つ上の階層であれば［../../../］というように増えていきます。

<img src="../../images/banana.jpg">

相対パスのメリット・デメリット

相対パスのメリット・デメリットは下記が考えられます。

メリット

• ローカル環境でも(ブラウザで見た目の確認ができる
• ルートパスに比べて書く手間が省けるので、作業効率UPに繋がる
• サイトの引越しをしても、リンクを修正しなくて良い

デメリット

• 構造を理解していないと行きたいフォルダになかなか辿りつけないことがある
• 大型案件の開発をするときに、どこになにがあるのか一発でわかりにくい

書き方以外でみる「絶対パス」「相対パス」の違い

開発環境

一つ目は、作業をする際に、インターネットに接続する（サーバーにアップロードする）必要があるかどうかの違いです。

絶対パスは前述のとおりドメイン名からすべて記述してあるため、作業を行う際には必ずWebサーバーに繋がります。
相対パスはインターネットを経由せずに目的のファイルにアクセスすることができます。
そのため、相対パスで記述したリンクの中から必要なものだけを抽出してローカル環境でテストを行うことが可能です。

作業効率

前述の例を見てもわかるように、相対パスと絶対パスでは記述の長さにかなりの差があります。
絶対パスは全体をすべて記述するため長く、相対パスはそれに比べて短くあらわすことができます。記述を短くすればそれだけ記載にかかる時間の短縮にもなりますし、ファイルも軽くなるため作業効率は相対パスの方がよいといえます。

リンク切れ

サイトの運営中にファイルの保存場所を移動すると、リンク先のファイルが読み込めなくなってしまうことがあります。相対パスと絶対パスとでは、それぞれリンク切れを起こす場面が異なります。

相対パスは、自身の現在地を起点とするため、パスを記述するページを移動するとリンク切れを起こしてしまいます。また、位置関係を正確に記述する必要があるため、階層構造をしっかりと理解していないと書き間違いなどのミスからリンク切れを起こしてしまう場合もあります。

それに対し、絶対パスはすべてを記述するため、ファイルを移動してもリンク切れが起こりにくいです。ただし、ドメインの変更（サイトの引越し）をした際にはすべてのリンクを修正する必要があります。

結局、Webサイト制作では絶対パスと相対パスどちらを使うべき？

それではこれまでのおさらいをかねて、
こらから出すいくつかの場面を「絶対パス」「相対パス」の中で選ぶならどちらのパスが適しているか考えてみましょう。

外部サイトのリンク先を指定するとき

外部サイトのリンク先を指定する場合には、必ず絶対パスを使用します。相対パスは同一サイト（サーバー）内にあるファイルを読み込むときにしか使用できないためです。

サイト内のファイルを指定するとき

この場合はどちらのパスも使用可能ですが、短い記述で作業効率が高められる相対パスを使用する場合が多い傾向にあります。
相対パスを使用する場合は、位置関係の書き間違いや階層構造の変更に十分注意が必要です。

Googleの推奨について

相対パスを使用する傾向が高い一方、Googleの Search Consoleヘルプでは、リンク切れを起こしにくい絶対リンク（＝絶対パス）での記述を推奨しています。

可能な場合は、相対リンクではなく絶対リンクを使用します（たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなくhttps://www.example.com/mypage.html とします）。

引用元：クロールが完了できなかった URL のエラー_Search Consoleヘルプ

あくまで「可能な場合は」とあるので、必ず絶対パスを使用しなければいけないというわけではありません。
作業効率とリンク切れのリスク回避、どちらを選択するかは状況に応じて判断が必要になります。

サイトを移転する予定がある場合

相対パスと絶対パスの違いの項でも触れましたが、絶対パスにはドメイン以下すべてを記述してあるため、サイトを移転した際にはすべてのリンクを書き換えなくてはなりません。

この書き換えはかなりの作業量になることが予想されますので、サイトの引越しを予定している場合には相対パスを使用しておいた方がよいかもしれませんね。

【応用編】複数の人がWebサイト制作に携わる場合

パスの記述や修正などを一人ではなく複数の人が行う場合には、階層構造が一目でわかりやすい絶対パスで記述した方が効率を上げられる場合があります。

相対パスは、それ自体の文字列が短いので記述する時間は短縮できますが、ぱっと見ただけでは全体像を把握することができません。そのため、確認する作業が増えたり、ミスの修正が必要になったりして、かえって効率が悪くなってしまうリスクもあります。

制作にかかわる人数や、そのメンバーがどの程度サイトの構造を把握しているかなどによって、どちらのパスを使用するか慎重に判断する必要がありそうです。

おわりに

いかがでしたでしょうか。今回は絶対パス・相対パスを中心にパスの種類とそれぞれの違い、書き方について解説しました。

クライアントや案件の規模にもよりますが、
初心者の方が個人で制作する場合は特に、最初のうちは相対パスで開発をすることが多いかもしれません。

パスについては、最初のうちにクライアントやチーム内でパスの書き方の指定があるか確認しておいたほうがスムーズに進められるので「制作を始める前に確認する」ということを頭の片隅に置いておくと良いかと思います。