絶対パスと相対パス・ルートパスの違いと使い方（HTMLコード）

パスは要素の場所を示すものであり、CSSやJS・aリンクなど様々な場所で使われます。

パスは、ファイル位置で書き方が変わる「相対パス」、ローカル環境では確認できないが統一表記ができる「絶対パス」、URLを省略できるが環境設定が必要な「ルートパス」に分かれます。

他にも昔は「./」の表記もあり、基本的には相対パスと同じですが、今でも多少使いみちがあります。

HTMLコードにおけるパスの記述は重要

HTMLソース上のパスとは、要素の場所を示すものです。

cssファイルの読込先やリンク、imgタグのsrc属性に入った部分などは全てパスになります。

<link href="css/style.css"> <img src="images/logo.png">

WEBサイトでは特に、上記の様に「属性="ファイルの位置"」を必ず場面がたくさん出てきます。

ローカル環境時はPCに対して対象ファイルの位置を知らせ、ネット上ではサーバーに対してファイルの位置を知らせる命令な訳です。

パスには様々な種類がある

HTMLコードを書くにあたり、「パス」をどのように書くかは非常に重要です。

パスには「絶対パス」「相対パス」「ルートパス」など様々な種類があります。

いずれも環境によって書き方が違うだけで、対象までの道筋を示しているのは同じです。

本記事ではこのパスの書き方についてまとめています。

パスの基本的な書き方

パスは、画像や各種ファイルの「場所」を示します。

画像・JS・CSSなどあらゆるファイルへの道順が、このパスによって書かれている訳です。

例えばPCデスクトップ上の「lpeg」フォルダ内に、HTML＋CSSのサイトデータを持っているとしましょう。

ロゴ画像を表示するパス

以下のような構成で、TOPページとなるindex.htmlのHTMLソースを開いているとします。

ここでindex.html上でimgフォルダ内にあるlogo.png画像を表示するには、以下のように書きます。

img配下のlogoを指すパス

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

index.htmlから見てlogo.pngがどこにあるかというと、同列位置にある「imgフォルダの中」ですよね。

ですのでsrc=""内にimg/logo.pngとパスを入れる事で、画像が表示される事になる訳です。

※「/」（スラッシュ）は「その中」という意味です。「/」をつける事でどんなに奥の階層でも指定する事ができます。

相対パスについて

まずは相対パスからです。

相対パスは先程の様に、パスを書くファイルの位置を「起点」とします。

パスを書いているページから見て「読み込みたいファイルがどこにあるか」を基準にする方法になりますね。

対象がディレクトリ配下にある場合

例えば読み込みたい要素（style.css）がcssディレクトリの中にある場合、以下の様に相対パスを書きます。

css配下の.cssファイルを指すパス

<link href="css/style.css">

href=""の中身は、スラッシュをつけず「css」から書き始めましょう。

これにより、同位置cssの中にあるstyle.cssを読み込むことができる訳です。

※css内に別ディレクトリがあってその中を指す場合は、css/xxx/style.cssと並ぶ事になります。

対象と同位置にある場合

ここで仮にこのstyle.cssが、cssディレクトリの中ではなくindex.htmlと同じ位置にあったとしましょう。

その場合は、以下の様になります。

同位置の.cssファイルを指すパス

<link href="style.css">

先程と違ってcss/の部分がなくなりましたね。

index.htmlから見るとstyle.cssは同位置にあるからです。

対象がディレクトリ上位にある場合

この様に、同位置やディレクトリ内にあるファイルの指定は簡単ですよね。

次は上位ディレクトリにあるファイルを指定する場合です。

productsディレクトリにあるindex.htmlファイルにパスを書くとしましょう。

このファイルからproductの外にあるstyle.cssを示す場合は、以下の様になります。

上位階層の.cssファイルを指すパス

<link href="../style.css">

../と書く事で、自分のファイル位置の一つ上のディレクトリ（階層）を示す事ができる訳です。

この様に「../」や「ディレクトリ名/」を駆使して、起点ファイルからの位置を自在に指定できるのが相対パスの強みです。

デメリット

相対パスは、書くファイルの位置によって指し示すパスを変える必要があります。

これを間違えると表示されない・機能しない等のエラーが起きる訳ですね。

常にファイルのある位置を把握しておく必要があるので、多少面倒になります。

絶対パスについて

次は絶対パスです。

絶対パスは「../」等ではなく、http:から始まるURLを指定するパスの書き方です。

パスを書くファイルが起点になるのではなく、常にWEBサイトのアドレスTOPが起点になります。

その為、どのファイル位置からでも同じ書き方をします。

絶対パスの書き方

例えば本サイトの場合、https://lpeg.info/ がTOPページとなりますので、絶対パスはこのURLから書き始めます。

階層が深くなればその分だけ「/」で区切っていきます。

上記は先程と同じ、imgの中にlogo.pngが入った構成ですね。

index.html上でlogo.pngを絶対パスで表示させる場合、以下の様に書きます。

index.htmlからlogo.pngを指す絶対パス

<img src="https://lpeg.info/img/logo.png">

どこからでも同じパスになる

上記構成でproducts内のindexファイルからlogo.pngを読み込む場合も、以下の様に書きます。

products/index.htmlからlogo.pngを指す絶対パス

<img src="https://lpeg.info/img/logo.png">

おわかりの様に、読み込むファイル位置は違ってもパスは同じなのです。

記述するファイルがどこにあろうと関係なく、常に「ドメインTOP/ディレクトリ/ファイル名」で示すのがポイントです。

必ずWEBサイトURLから始まり、../などの上位階層の考え方がありません。

デメリット

絶対パスは、記述ファイルの位置を起点に毎回書き換える必要が無い分だけ楽でしょう。

しかしサイト制作段階では、ローカル環境での確認がしずらくなります。

絶対パスは常にネット上の要素を指すため、事前に要素をWEB上にUPしておく必要があるからです。

WEBサイト上にその要素が無かったら空白になったり読み込めなかったりします。

ルートパスについて

パスの書き方はもう一つあります。それが「ルートパス」です。

ルートパスは、絶対パスで書くURLの部分を「省略した」書き方になります。

ルートパスは「/」から始める

例えば先程紹介した、絶対パスによる「cssの読込」を例にとりましょう。

<link href="https://lpeg.info/style.css">

これをルートパスで書き換えると以下の様になります。

<link href="/style.css">

ドメインURLの代わりに、先頭を「/」スラッシュで始めています。

これによりネット上では、https://lpeg.info/style.cssが読み込まれる事になります。

ドメインルート部分を「/」で短縮表示する事ができる訳ですね。

デメリット

先頭にスラッシュを入れるだけなので相対パスの様にみえますが、相対パスとは違います。

相対パス…<link href="style.css"> ルートパス…<link href="/style.css">

2つのうち上の表記では、ローカル環境でcssファイルが読込されます。

しかし下の場合は、PCにきちんと「環境設定」をしていないとローカル環境では読込されません。

Windowsのルートパスになる

例えばノーマルのWindows環境だと、C:\style.css を読むようになります。

ノーマル環境だと「/」はドメインルートではなく、C（またはD）ドライブを示すためです。

上記はDドライブのTOPが開いた状態

ルートパスが「https://lpeg.info/」であるという認識が、PCには無いのですね。

ただしこのままサーバーにUPすれば、「/」がドメインルートになるのできちんと機能します。

ローカル環境でルートパスによる確認をする場合、事前にドメインルートの環境構築が必要になります。

相対パスの「./」について

よく他者が作ったHTMLソースを見た時に、パスに「./」が設定されている場合があります。

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

両方とも同じ位置を示す

ドットが1つである「./」は相対パスですが、「../」とは違い同じ階層を表します。

つまり普通にディレクトリから始まる相対パスと同じ意味になります。

<img src="./img/logo.png"> <img src="img/logo.png"> この2つは同じです。

わざわざ「./」と書かなくても、ディレクトリ名だけで同じ階層を表すことはできますよね。

ですので今「./」と書く必要はほとんどありません。

今はあまり使われない「./」ですが、実は一つ小ネタな使い方がありますので、一応紹介しておきましょう。

「./」を書くメリット

HTML+CSSファイルのローカル環境で、以下の様にディレクトリ名のみでリンクを張った場合を例にとります。

それぞれディレクトリに「./」を加えている状態ですね。

さらに、index.html等のファイル名も入れていません。

最近はWordpressによるページ制作がほとんどでしょうから、index.htmlではなく「/content/」等の形式で終わる事が多いはずです。

実際にリンクにパスを書いた例

<a href="./products/">products</a> <a href="./faq/">faq</a> <a href="./corp/">corp</a>

ローカル上のディレクトリ内一覧が表示される

これでローカル上でページリンクを押すと、ディレクトリ内のファイル一覧が表示されます。

その中に制作したサブページ（index.htmlファイル）が見えるのがわかります。

そこをクリックすると、サブページが表示される訳です。

ローカルでは1クッション入るが、ルートパスにしやすい

つまり1クッション入る形にはなりますが、環境設定なしにサブディレクトリのページを見る事ができるのです。

ファイルをサーバーにUPする場合は、先頭の「.」だけ一括で消すことになります。

「./」はルートパスにしやすい

本来はルートパスでパスを書いておいた方が、実際にアップした後は正常に動く訳ですから楽な訳です。

しかしルートパスで書いてしまうと、PCのデフォルトルートはC:\なので、ローカルだと環境設定が必要になります。

そんな時「./」としておけば、ローカル制作中は1クッションで確認できますし、「.」を消せばすぐにルートパスになる訳です。

注意

この方法はaタグにのみ有効ですし、1つ上の階層へいくリンクとしては使えません。

さらに「.」を消し忘れると、WEB上では相対パスの扱いになりますので、正常にリンク先が機能しません。

使い慣れないのであれば、そのまま使わない方が良いと思います。

一押し人気コーナー紹介