【HTMLの基礎】いまさら聞けない!?「相対パス」「ルートパス」「絶対パス」
あけましておめでとうございます。
年が明けて2020年となり、ことしから学校でもプログラミング学習が必修となります。
こどもたちに感化されて、自分もプログラミングを始めてみようと思う方も多いのではないでしょうか。
あまりプログラミング言語として取り上げられることのない「HTML」ですが、立派なプログラミング言語です。
今回は、このHTMLコーディングにおいて、いまさら聞けないけど、知らないと恥ずかしい「相対パス」「ルートパス」「絶対パス」について解説します。
相対パスとは？
相対パスとは、「自分から見て、対象のファイルがどこにあるか」を示したものになります。
たとえば、「今現在のドキュメントから1階層上のimgフォルダ内にある画像」は
<img src="../img/XXXXX.jpg" alt="sample">
のように指定します。
相対パスのメリット・デメリット
相対パスのメリット
- Webサーバではないローカル環境でもパスがつながる
- 記述が短くて済む
という点が挙げられます。
相対パスのデメリット
- 自分自身が起点となるため、ファイルの場所を移動をしたときに、リンク切れを起こしやすい
という点が挙げられます。
ルートパスとは？
ルートパスとは、「Webサイトのルート（トップページ）から見て、対象のファイルがどこにあるか」を示したものになります。
たとえば、「/about/という第2階層のimgフォルダにある画像」は
<img src="/about/img/XXXXX.jpg" alt="sample">
のように指定します。
ルートパスのメリット・デメリット
ルートパスのメリット
- どんな時もルートを起点にするため、ファイルまでの経路がたどりやすい
- ファイルの移動があっても、サイト内でファイルパスの一括置換がやりやすい
という点が挙げられます。
ルートパスのデメリット
- 階層が深いページの場合、同階層に対象ファイルがあっても、ルートからの長いパスを書かなければならない
- Webサーバがないとドキュメントルートを定義できないので、ローカル環境で検証が難しい
という点が挙げられます。
絶対パスとは？
絶対パスとは、「インターネットの世界全体で、対象のファイルが、どのURLの中の、どの場所にあるのか」を示したものになります。
たとえば、「https://hogehoge.comというサイトの/about/というディレクトリのimgフォルダにある画像」は
<img src="https://hogehoge.com/about/img/XXXXX.jpg" alt="sample">
のように指定します。
絶対パスのメリット・デメリット
絶対パスのメリット
- URLですべて記述するので、リンク切れを起こしにくい
絶対パスのデメリット
- Webサーバがないとドキュメントルートを定義できないので、ローカル環境で検証が難しい
- 記述が長い
まとめ
今回は、Webドキュメントにおけるそれぞれのパスの書き方のメリット・デメリットをご紹介しました。
どの書き方をしても、表示結果が同じならば問題ないので、それぞれのタイミングで書き方を考えれば良いと思います。