絶対パスと相対パスとルート相対パス

 スタイルシートで背景画像を指定する場合、background-image などで画像の URL を指定する必要がありますが、URL を指定するには絶対パス、相対パス、ルート相対パスの3つの方法があります。今回はこれらの違いについて調べたものをまとめてみました。

絶対パス

http://~ではじまる URL の指定方法です。例えば、当ブログのトップ絵を絶対パスで指定した場合には次のようになります。

すこぶる長いです。

わかりやすくて間違えないのですが、ドメインやサイト構成の変更があった場合には該当箇所をすべて修正しなければならなくなるため、まず使われないようです。個人サイト程度ならいいのでしょうが。

相対パス

CSS ファイルが置かれている場所を基準に参照するファイルを指定する方法です。例えば、レンタルサーバーに次のように Web サイトやブログを構築していると考えてください。

20161028_1

public_html はレンタルサーバーにおいて公開したいファイルをアップロードするフォルダの名前です。当ブログでもお世話になっているエックスサーバーさんもこのフォルダですが、サーバーによっては www、html、httpdocs となっているところもあるようです。

ちなみに、エックスサーバーさんは36ヶ月で契約すれば月額900円で利用が可能、24時間365日のサポートにも対応しているので初心者にも安心です。データベースを移行せずにプラン変更がワンクリックで可能なので、とりあえずブログを運営しておいてアクセスが伸びてからより高機能のプランに移行することができます。



ダイレクトマーケティングおしまい。

上記のようなファイル構成だった場合にスタイルシートで sample.png を参照する指定方法は次のようになります。

CSS ファイルと同じ階層にある sample.png を読み込むということですね。「./」は省略することが可能なので、次のように書くこともできます。こちらのほうが一般的なんじゃないでしょうか。

画像が増えてくればフォルダを追加して管理することになると思います。

20161028_2

この場合は次のように指定します。

WordPress のテンプレートの中身を見ると CSS の数も多くなっているので、スタイルシートもフォルダに入れて管理している場合が多いです。

20161028_3

ここで style1.css のなかで sampl2.png を参照する場合は次のように指定します。

「../」はひとつ上の階層を意味しており、その階層にある images フォルダのなかの sample2.png にアクセスするという相対パスです。

このようにするメリットといえば、テスト環境から本番にファイルを移してもスタイルシートの修正をする必要がないことです。例えば、XAMPP などのローカル環境で作成したホームページをレンタルサーバーに移したとき、絶対パスで指定していた場合にはこの部分をすべて修正しなければならなくなってしまいます。相対パスで記述しておけば、これが必要なくなります。

反面、自分の位置を基準とする指定方法のため常にフォルダ構成を意識しなければならないことから間違いをしやすく、大型案件や共同開発などでは指定したファイルの場所がどこにあるのかわかりにくいといったデメリットもあります。

ルート相対パス

絶対パスのように煩雑ではなく、相対パスよりわかりやすい記述として「ルート相対パス」という指定方法があります。名前に相対パスとはいっていますが、分類としては絶対パスになります。

20161028_4

これを相対パスで記述しようとすると次のようになります。

フォルダの階層が深くなるほど ../ の数が増えていき、これをすべて書くのは煩わしいです。

これをルート相対パスで記述すると次のように書くことができます。

「/」がルートディレクトリ、つまりフォルダの最上層を示しています。エックスサーバーの例でいえば、public_html を表していることになります。この方法ならファイルを探すにはルートから辿っていけばよいのでわかりやすいです。

ただしひとつだけ注意することがあって、ルート相対パスはローカル環境では正しく表示されないことがあります。別途、レンタルサーバーにテスト環境を構築するなどの必要があります。先ほど紹介したエックスサーバーさんをはじめ、各社レンタルサーバーは無料お試し期間のキャンペーンを行うことが多いので、探してみるとよいかと思います。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP