目的
- 絶対パスと相対パスを理解して、効率的に使い分けたい。
解説
絶対パスと相対パスの違いを解説します。まずは、このページのURLであるhttps://note-book.foo/management/2/2.htmlを例に絶対パスを解説します。
絶対パス
- ▼サーバー上
/home/ユーザー名/pub/note-book.foo/management/2/2.html - ▼ブラウザ上
https://note-book.foo/management/2/2.html
いずれの絶対パスも、唯一無二の完全な場所を示しています。サーバー上の絶対パスは.htaccessでベーシック認証を設定する時や、ホームページ制作ソフトでの初期設定時などで使います。ブラウザ上の絶対パスは外部サイトで自サイトのリンクを貼る時などに使います。
相対パス
- ▼同じ階層にあるJavaScriptを読み込む場合
<script type="text/javascript" src="code.js"></script> - ▼1つ上の階層にあるCSSを読み込む場合
<link rel="stylesheet" type="text/css" href="../css/style.css" media='screen,print' /> - ▼2つ上の階層にある画像を読み込む場合
<img src="../../image/example.jpg" />
現在のファイルを起点として、同じサイト内の目的のファイルの場所を示すのが相対パスです。階層が1つ上がるごとに../を足します。ドメイン変更やサーバー引越をしても、そのまま動く利点があります。他には、テスト環境とサーバーで同じ記述が使える点も利点です。ファイルの場所を示す時は相対パスでの表記がオススメです。
比較表
| 項目 | 絶対パス | 相対パス |
|---|---|---|
| 定義 | ルート(最上層)からの完全な場所 | 現在地を起点とした目的地への道順 |
| 表記例 | /home/user/pub/index.html | ../index.html |
| 利点 | 確実性が高い。どこから呼び出しても迷子にならない。 | 柔軟性が高い。フォルダー移動や、ドメイン変更、サーバー引越に強い。 |
| 欠点 | 環境変化(サーバー移転等)で全ての記述修正が必要。 | 階層が深くなると記述が複雑になり、ミスが起きやすい。 |
| 主な用途 | .htaccessの設定、外部リンク、メール用URL | HTML内の画像表示、CSS/JS読み込み、内部リンク |
| 保守性･運用 | 固定的(環境が変わると壊れやすい) | 可搬的(環境が変わっても壊れにくい) |