2024.11.08

Web初心者向け!絶対パス・相対パス・ルート相対パスの使い方ガイド

Web制作を進める上で必須の知識となる「パス」の扱い方には、絶対パス・相対パス・ルートパスの3種類があります。
それぞれの違いを理解し、正しく使い分けることでリンク切れを防ぎ、安定したサイト運営が可能になります。
「各パスの意味や記述方法を知りたい」「リンクの最適化をしたい」とお考えの方に向けて、わかりやすく解説します。

パスとは

パスとは、ファイルやフォルダの場所を示す情報で、Webサイト内のページや画像などのリソースにアクセスするための「道しるべ」としての役割を果たします。パスの指定方法によっては、リンク先が異なったり、表示エラーが発生したりするため、正確に設定することが重要です。

パスの中にもいくつか種類が存在します。それぞれ目的によって使い分け、正しく使用することが必要です。

絶対パス

絶対パスは、ファイルのフルパスを示し、URLのプロトコル(https://など)から始まるパス指定方法です。
サーバーの場所に関わらずファイルの正確な位置を示します。

メリット

  • どのページにいてもリンクが確実に正しい位置を指すため、リンク切れを防ぎやすい

デメリット

  • ドメインが変わるとリンクが無効になり、複数ページでリンクを書き換える手間が発生する(ローカル環境やテスト環境で作業を行う際、環境によってリンクを書き換える必要があります)
  • 必然的にURLが長くなるため、ファイルの場所を指定する作業に時間がかかる
  • サーバー環境を用意しないと使用できない

相対パス

相対パスは、リンク元の位置からの相対的なパス指定方法です。リンク元のページから見た位置関係でリソースを指定し、たとえば images/photo.jpg../about/index.html のように記述します。

メリット

  • ページ間で移動してもリンクが機能するため、異なる環境での再利用が容易であり、リンク先の一括変更がしやすい
  • Webサーバに上げずに作業を行えるため、ローカル環境のブラウザで制作やテストを行える
  • 絶対パスよりも短いURLを記述できるため、作業の負担が軽減される

デメリット

  • 前提として、同じサーバ内にファイルやデータがなくてはいけない
  • 自分が今いるページの位置を起点にするため、そのページが移動するとリンク切れになる (現在開いているページの階層が変わるなど)

ディレクトリの構造が決まっているプロジェクトや、開発環境・本番環境でのURLが異なる場合に便利です。

ルートパス

ルートパスは、ルートフォルダ(枝分かれした最上位階層のディレクトリ)を起点にパスを指定する方法です。パスの先頭にスラッシュ(/)をつけて、/images/photo.jpg のように書き、現在のドメインからの相対的な位置を示します。

現在編集中のファイルを起点としている相対パスに対して、トップ階層からの相対パスを指定します。

メリット

  • どの階層から指定しても同じパスが使える
  • ドメインのみが変更となった場合、修正が不要

デメリット

  • ディレクトリ名などを変更した場合、パスを書き換える必要がある
  • サーバー環境を用意しないと使用できない

目的に合わせて使い分けましょう

それぞれのパスには異なる特性と役割があり、状況に応じて使い分けることが重要です。
基本を理解し、目的に合わせて適切なパスを選ぶよう心がけましょう。

著者

ヨクスル制作チーム