「web制作におけるパスの書き方」絶対パス・ルート相対パス・相対パスの違いについて

3種類のパスの書き方

パスの書き方には以下の３つの書き方があり、それぞれ挙動が異なります。

1. 絶対パス

http://hoge.co.jp/assets/images/ogp.png

絶対パスは「http://〜」から始まるパスの書き方です。TwitterやFacebookのOGP画像の指定に使用します。また外部サイトへのリンクを記述する場合にも使用します。

メリット

1. 階層構造が変わってもパスの指定の仕方が変わらない。
   「/index.html」から参照しても「/piyo/index.html」から参照してもパスの指定の仕方は同じ。

2. ルート相対パス（ルートパス）

/assets/images/ogp.png

サーバールートを基準としたパスの書き方です。ほとんどの場合ルートはドメイン直下になります。絶対パスのドメイン部分が省略されたイメージです。

メリット

1. 階層構造が変わってもパスの指定の仕方が変わらない。
   「/index.html」から参照しても「/piyo/index.html」から参照してもパスの指定の仕方は同じ。
2. 本番環境やテスト環境などアップする環境のドメインが変わっても、それに応じてパスの記述を変更する必要がない。

3. 相対パス

./assets/images/ogp.png

ファイルを参照するファイルを基準にしたパスの書き方です。

メリット

1. 本番環境やテスト環境などアップする環境のドメインが変わっても、それに応じてパスの記述を変更する必要がない。

最後に

web制作であれば、初学者は基本的に「ルート相対パス」で記述することをお勧めします。慣れてきたら、それぞれの書き方の特徴を理解した上で使ってみてください。