スタイルシートで画像などを指定する場合にはパスを記述する必要がありますが、絶対パス、相対パス、ルート相対パスの3つの方法があります。

今回はこれらの違いと、それぞれのメリット・デメリットについて調べたものをまとめてみました。

絶対パス

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

メリット

誰が読んでも必ずわかります。

デメリット

とにかく長いために面倒くさく、コードが読みづらくなります。また、ウェブサイトを引越しする場合、絶対パスで指定した箇所をすべて修正しなければならないため、まず使うことはないようです。

相対パス

ファイルが置かれている場所を基準に参照するファイルを指定する方法です。例えば、レンタルサーバーに次のようなウェブサイトがあったとします。

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

上記のようなファイル構成だった場合、CSSからsample.pngを参照するには次のように指定します。

CSSファイルと同じ階層にあるsample.pngを読み込むということです。「./」は省略できます。こちらのほうが一般的です。

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

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

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

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

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

メリット

開発の際にはテスト環境から本番へ引越しをすると思いますが、CSSの修正が必要ありません。

例えば、XAMPPなどのローカル環境でホームページを作成してレンタルサーバーに移行すると、絶対パスだった場合にはパスを修正しなければなりません。

相対パスなら修正しないでそのまま引っ越せます。

デメリット

フォルダやファイルが増えて階層が深くなると、記述が冗長になりがちです。フォルダが増えると「../」が増えて大変です。このため、大型の案件では敬遠されることが多いようです。

また、常にフォルダ構成を意識しないと、どこになにがあるのかがわからなくなるのもデメリットです。共同開発のように、よそのグループのフォルダ構成がわからない場面ではちょっと使いづらいです。

ルート相対パス

絶対パスのように煩雑ではなく、相対パスよりわかりやすい記述として「ルート相対パス」という方法があります。名前に相対パスと入っており書き方も相対パスに似ていますが、考え方は絶対パスと同じです。

メリット

フォルダの階層が深くなると、相対パスは面倒くさくなります。

../がいっぱいでてきます。フォルダやファイルの位置関係を毎回思い出さなくてはならず、ぱっと見てわかりにくいのも難点です。案件の規模が大きくなるほど相対パスのデメリットが目立つようになります。

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

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

デメリット

ルート相対パスはローカル環境では正しく表示されないので、レンタルサーバーにテスト環境を用意する必要があります。

各社レンタルサーバーはだいたい無料のお試しキャンペーンを行っているので、こちらを利用すると大変お得です。

イラスト図解式 この一冊で全部わかるサーバーの基本

posted with カエレバ

きはし まさひろ SBクリエイティブ 2016-03-29

Amazon

楽天市場