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

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

パスってなに？

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

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

WEBページの画像も全てパスを書くことで画面上に表示されています。

パスが正しく記述されていないとファイルが読み込まれず、サーバー内ではエラーが出るので、パスについての基本的な知識は必要です。

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

パスの書き方は4つ

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

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

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

最初に覚えるのはこの2つだけで大丈夫｜絶対パスと相対パス

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

パスの基本はこの2つに集約されているため、Web制作を始めたばかりの方は、まずここを押さえることが大切です。

逆に、ルートパスやフルパスについては、無理に覚える必要はありません。

これらは応用的な内容なので、最初のうちは使う機会も少なく、混乱の原因になってしまうこともあります。

そのため、まずは「絶対パス」と「相対パス」の違いをしっかり理解しておきましょう。

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

まずは、パスの基本である「絶対パス」と「相対パス」について解説します。

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

絶対パス：サイトのURLを最初から全部書く　例：https://tegasuki.com/path

相対パス： 今いる場所（ファイル）から対象のファイルまでのパスを書く
例：img/logo.png 、../img/logo.png

わかりやすく伝えると、

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

❷絶対パスの書き方

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

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

このパスは、どこからでもアクセスできるので、絶対パスを使えば便利だと思うかもしれません。しかし、実は絶対パスにはデメリットがあります。

絶対パスのデメリット

相対パスを使うと、作業する環境が変わっても柔軟に対応でき、コードの管理がしやすくなります。

❸相対パスの書き方

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

3パターンの例を見てみましょう。

パターン❶

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.png

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

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

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

フルパスの確認方法

絶対パス、相対パス、ルートパス、フルパスについて解説しましたが、初心者の方には少し難しく感じたかもしれません。パスは意外と見落としやすいので、慣れていても確認するクセをつけておくと安心です。

関連記事