【初心者向け】絶対パスと相対パスの違いと書き方を解説

全部絶対パスで書いたらダメなの？そもそも絶対パスと相対パスって何だろう。
他にもルートパスとかフルパスとかあるけどよくわからない！
WEB制作を学び始めたばかりの方には、パスの書き方に慣れるまで時間がかかる方が多いかもしれません。
なので本記事では初心者向けにわかりやすくパスの違いと書き方を解説します。

パスってなに？

パス（path）とは、「道、通り道」という意味があり、WEBサイトでいうと、目的のページにたどり着くまでの「道筋」のことを指します。

どこにページがあるのか、画像はどこにあるのか、cssファイルやjsファイルはどこなのか。その道筋を示すものが「パス（path）」と呼ばれています。

WEBページの画像も全てパスを書くことで画面上に表示されています。パスが正しく記述されていないとファイルが読

み込まれず、サーバー内ではエラーが出るので、パスについての基本的な知識は必要です。

初めから基本的な知識を身につけておけば安心です！

パスの書き方は4つ

パスには「絶対パス」「相対パス」「ルートパス」「フルパス」の4つの種類があります。いずれも使う場面によって書き方が違うだけで、対象までの道筋を示しているのは同じです。

この中で特に重要なのは、絶対パスと相対パスです。

これらをしっかり理解することで、他のルートパスやフルパスについてもすぐに把握できるようになります。

初心者の方は、絶対パスと相対パスを理解しておけば大丈夫！

初心者の方は、まず絶対パスと相対パスをしっかり学ぶことが大切です。

先ほどもお伝えした通り、パスの基本的な考え方は絶対パスと相対パスに基づいているため、非常に重要です。

そのため、絶対パスと相対パスに混乱している方は、後ほど説明するルートパスとフルパスについては覚える必要はあ

りません。おそらく、しばらくの間は使うことがないと思いますので、焦って学ぶ必要はありません。

絶対パスと相対パスの違いと書き方を解説

それでは、絶対パスと相対パスを説明します。ポイントを絞って順番に解説していきますね。

❶絶対パスと相対パスの違い

絶対パス：ページのURLを直接指定するパスのこと
相対パス：現在いるファイルから対象のファイルまでのパスのこと

絶対パスの例

この記事を例にすると、この記事のURLが絶対パスにあたります。サイトのページを読み込む際には、このように絶対パスを使います。

相対パスの例

上記が相対パスです。

imgフォルダと同じ階層にあるindex.htmlで「logo.png」という画像を読み込みたい場合は上記のようにパスを入力することで読み込む事ができます。

さらに簡単に言うと、次のように分けられます。

さらに詳しく説明し、画像を使って書き方を解説していきます。

❷絶対パスの書き方

以下のようなディレクトリ構成を例に挙げて解説します。

一番上のフォルダから、目的もくてきのファイルまでのパス

上記の枠で囲まれたファイルを読み込む場合は、このようにパスを指定します。

このパスは、どのファイルでも使用することができます。しかし、すべてに絶対パスを使用すれば良いと思うかもしれませんが、実はデメリットもあります。

絶対パスのデメリット

絶対パスだけで記述すると、コードが複雑になり管理が難しくなるため、相対パスが使える場合は相対パスを使用しましょう。

❸相対パスの書き方

以下のようなディレクトリ構成を例に挙げて解説します。

読み込むページから見て、目的もくてきのファイルがどこにあるのかを書くパス

index.htmlでlogo.pngの画像を読み込む際の相対パスの記述方法は、以下のようになります。

index.htmlがimgフォルダと同じ階層に配置されているため、上記の方法で読み込むことができます。

それでは次は下記のような場合はどうでしょうか。

top.htmlでlogo.pngの画像を読み込む際の相対パスの記述方法は、以下のようになります。

imgフォルダがtop.htmlと同じ階層ではなく、1つ上の階層にあるため、../を記述する必要があります。../を記述することで、1階層上のファイルを指定できます。

それでは次は下記のような場合はどうでしょうか。

top_base.htmlでlogo.pngを読み込みたい場合はimgは2つ上の階層にあるので、次のように記述します。

法則は理解できたかと思います。目的のファイルの階層が上がるごとに、../を追加していくだけです。相対パスは記述が短く済むため、コードがすっきりと簡潔に書けます。

相対パスのデメリット

これはサイト内でのみ使用されるため、主に開発者向けの記述方法です。WEB制作を学ぶ際には避けて通れない重要な概念なので、しっかり理解しておきましょう。

❹絶対パスと相対パスの使い分け

どういう時に絶対パスを使ったらいいのか、どんな時に相対パスを使えるのか、使い分けを解説します。

WEB制作をしていると、相対パスを使う機会が多くなるので、実際に使っていくうちに自然と覚えられます。焦らず少しずつ身につけていきましょう。

もう十分だと感じるかもしれませんが、ここからルートパスとフルパスについて説明します。もしここまでで疲れてしまった方は、無理をせず、休息をとってくださいね！

ルートパスとフルパスの書き方を解説

どちらも絶対パスの応用にあたります。主にサーバー内での開発時に使われることが多いです。

初心者の方は、まだ使う機会が少ないかもしれませんが、こういったものがあることだけは知っておきましょう。

ルートパスの書き方と解説

サーバー内で使えるパスで、絶対パスを省略して簡潔に記述できるのが特徴です。

以下のような絶対パスがあるとします。

このパスをルートパスで書くと、次のようになります。

ドメイン名を省略することができるのがルートパスの特徴です。imgフォルダの前に【/（スラッシュ）】を付けることで、省略が可能になります。

絶対パスだと記述が長くなりがちですが、サーバー内では上記のように記述するだけでファイルを読み込むことができるため、非常に便利です。/（スラッシュ）から始まるパスはルートパスです。

覚え方は簡単で、スラッシュから始まるならそれがルートパスだと覚えておきましょう。

パスがスラッシュから始まったり、ドメイン名が省略されたルートパスを理解できるようになれば、さらに自信を持って進めるようになるでしょう。

※相対パスと混同しやすいので、気を付ける必要があります。

フルパスの書き方と解説

サーバー内の最上位階層から参照されるパスのことを言います。

https://tegasuki.com/img/logo.php/

という絶対パスがあるとすると、これのフルパスは以下のようになります。

上記のものがフルパスにあたります。サーバー内では、このように指定されています。

BASIC認証を設定する時などにフルパスを利用することがありますが、普段の作業ではあまり使うことがないので、特別に覚えておく必要はないかもしれません。

フルパスの確認方法

絶対パス、相対パス、ルートパス、フルパスについて解説しましたが、初心者の方には少し難しく感じたかもしれません。パスの書き方は、経験が長い人でもうっかり忘れることがよくありますので、その都度調べれば問題ありません。