Tweet

Pocket

皆さんがWeb製作を行う時、画像やCSSなどのパスを何で指定する事が多いでしょうか？
相対パス？絶対パス？ルート相対パス？

私は制作のしやすさで考えると相対パスが好きなのですが、案件によってパス指定を決められるケースの方が多かったりします。今回はどのような状況でどのようなパス指定が良いのかをまとめてみました。

相対パスとは？

相対パスとは簡単に説明すると「起点となる場所からのパス（PATH）」になります。たまにPATHとPASSを間違えている人がいるのですが、PATHが正解です。

もっとわかりやすくindex.htmlの画像指定を例にしていきます。

index.html

このように書くと、index.htmlと同じ階層にあるimgというフォルダの中のtest.pngを読み込みますよ。という意味になります。
<img src=”./img/test.png”>と書いても同等の意味になるのですが、なんかわかりにくいので私は書きません。

index.htmlからみて上の階層にある場合の相対パスは以下になります。

index.html

「../」が1つ上の階層を意味します。2つ上の階層の場合は「../../」というように一つずつ増やしていけばいいわけです。

相対パスのメリット

相対パスを使うメリットと言えば、何と言っても制作のしやすさじゃないでしょうか。
ローカルにあるhtmlを叩くだけでサーバー上の形と同じになってくれるのはすごくありがたいですよね。

コーディングはシンプルなテキストエディタを使ってもいいし、dreamweaverを使っても確認しやすさ、制作のしやすさ、抜群です。

相対パスのデメリット

私は相対パスが好きなのであまり気にならないのですが、
大型の案件をする時に、どこにあるかわからなくなってしまったりするようです。共同開発をする時なども、相対パスを嫌う制作者が多いというのもデメリットの一つでしょうか。

絶対パスとは？

絶対パスというのは、https://から始まって最後まで書いてしまうやつです。絶対パス、フルパス、完全パス、などと呼ばれています。

<img src=”https://ドメインや階層/img/test.png”>

こんな感じですね。
はっきり言ってあまり使う機会はありません。
同じドメイン下にあれば絶対パスを使用する理由はありませんし、他のサーバーから画像を絶対パスで引っ張るなんて嫌がられますしね…。

絶対パスのメリット

絶対パスに指定するメリットは正直思い浮かびません。
リンク切れを起こさない…なんて書いてある記事も見かけますが、ドメイン変更なんてしたら一発アウトです。

Webの仕事の中にはドメイン移管、ドメイン変更、なんて作業は山ほど発生するのです。

絶対パスのデメリット

・いちいち絶対パスで指定するのが面倒臭い
・絶対パスにするメリットがない

…メリットがない事が最大のデメリットなのではないでしょうか。

ルートパスとは？

「ルートパス」もしくは「サイトルートパス」などと呼ばれます。
ルートパスは、その名の通りルート（一番最初の階層）からのパスという意味です。
大型案件などでプロジェクトに参加する時は、ほとんどと言っていい程「ルートパスで」って言われます。

index.html

こんな書き方ですね。
最初に「/」を置く事によって、ルートからの位置を指定する事になります。

私があまり好きではない指定方法です…。

ルートパスのメリット

誰が見てもわかりやすいというのが一番のメリットではないでしょうか。
どの階層にあっても、このPATHさえ見ればすぐにわかります。確かにメリットも大きいんですよね。

システムの方は特にルートパスにして欲しいと言ってきますね。

ルートパスのデメリット

ルートパスはローカル環境で制作しにくいんです。
htmlをそのまま叩くとCSSが何も適用されてない…画像が何も見えない…。こんな状況になります。

テスト環境を階層分けしている人にとってもデメリットになるかなと思います。
例えば

こんな感じでサイトごとにテスト環境を用意してたとします。
site1～site2まで相対パスで作成していて、site3だけルートパスって事になったりすると大変です。
ルートパスはドメインルートからのパスなので、1階層余計に入ってしまうんです。こうなると納品ファイルとパスが異なってしまうので、ややこしいんですよね…。

dreamweaverの機能などを使うとプレビュー表示できたりするのですが、スピード感を求める私にとってはプレビュー機能なんて面倒臭いんです。
色々面倒なので、ルートパスでの開発の場合は、私はサブドメインでテスト環境を一つ用意して作業しています。

絶対パスと相対パスとルート相対パスのメリットデメリット　まとめ

いかがだったでしょうか？
絶対パスはあまり使う機会がないとしても、相対パスとルート相対パスはある程度使い分けられるようにしておくことは必要だと思います。
ルート相対パスは慣れるまでちょっと面倒ですが、慣れてしまえばなんてことはありません。

製作をする前にクライアントや代理店から「パス指定」の指定はあるかどうか最初に確認しておき、指定がない場合は制作するサイトはどのパス指定が最適なのかを見極められるようにしておきましょう。

Tweet

Pocket