Webデザインをしていると、必ず出てくるのが「絶対パス」と「相対パス」という概念です。

一般的には「相対パス」を使うよう指導する場合が多いようなのですが、覚えやすさと確実性を考えるなら

「絶対パス」がオススメです。

「絶対パス」と「相対パス」どちらを使う？

Webデザイン業界では「絶対パス」と「相対パス」どちらを使うかという問いに対して、結構多くの方が「相対パス」を使うとお答えになるかと思います。

たとえば「index.html」からCSSを参照する場合

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/style.css">

このような記述が一般的だと思います。
これは「相対パス」で記述されています。

相対パスは今いる場所を基準に書く方法

なぜ、「相対パス」が推奨されたのかですが、よく言われる理由に

「絶対パス」だと「http://」から記述しなければならず、ドメインが変わる時に修正が大変だ。

というものを結構見かけます。

よって、それは面倒なので「相対パス」で書いておけば、「ドメイン引っ越ししても大丈夫じゃん？」という話になっているのです。

相対パスは今いる場所を基準に書く方法なので、ドメインが変わろうが関係ないからです。

しかし、これは２つの理由で良い方法とは言えない場合があります。

(1) HTMLファイルの階層が変わるとパスも変わる
(2) 絶対パスにはドメインを含まないものもある

たとえば、CSSやJSの場所は変わらないけど、HTMLファイルは階層が変わる可能性がある場合は「絶対パス」で書いておく方が便利です。

ただし、これらの方法は「静的」に使う場合（CGIは使わない）に限られます。

絶対パスにはドメインを含まないものもある

「絶対パス」は「http://」から記述するものと、そうでないものがあります。

絶対パス例
(1) http://www.sample.com/index.html
(2) /index.html

この「/index.html」は「絶対パス」で、「/」（スラッシュ）はRootを意味します。Rootとはホームページを公開する場合の最上位ディレクトリです。

「/index.html」と書けば、どんなに深い階層からでも、最上位ディレクトリの「index.html」にリンク可能になるわけです。

さて、ここで少しご存知の方だと以下のように言うでしょう。

(1) http://www.sample.com/index.html ← パスではなく「URL」
(2) /index.html ← 絶対パスではなく「ルート相対URL」

(1)は確かに「URL」です。しかし、これは「絶対パス」の範疇に入ります。

(2)は「相対」って書いてあるからそう思うかもしれませんが、ルートから見た相対URLという意味なのであって、これも「絶対パス」の範疇です。

「ルート相対＝絶対パス」なのです。

先ほど、「相対パスは今いる場所を基準に書く方法」と書きました。これは別名「相対URL」とも呼ばれますが、そもそも「URL」という言葉自体が後から出来たもので後付けで名前がついています。

私はわかりやすさで言えば「絶対パス」と「相対パス」でよいと思います。

「絶対パス」と「相対パス」

よく似たもので「./index.html」というのがありますが、これは「相対パス」です。「今いるディレクトリと同じ階層のindex.html」です。

例
「http://www.sample.com/1/a.html」からリンクを記述した場合

(1) 「/index.html」（絶対パス）
　→ http://www.sample.com/index.html

(2)「./index.html」（相対パス）
　→ http://www.sample.com/1/index.html

(3)「index.html」（相対パス）
　→ http://www.sample.com/1/index.html

(4)「../index.html」（相対パス）
　→ http://www.sample.com/index.html

「相対パス」は実はわかりづらい

DOS時代からPCをいじっていると、こういった事は自然と身につくのですが、それでも最初のうちは「ヤヤコシイわい！」と思ったりしました。

逆に「絶対パス」は、どこから参照しようとも同じパスを書くことができます。

絶対パスの例
(1) 「/index.html」（絶対パス）
　→ http://www.sample.com/index.html

(2) 「/a/index.html」（絶対パス）
　→ http://www.sample.com/a/index.html

上は「どの階層」から見ても同じ記述になります。だから「絶対パス」と呼ばれるのです。

CSSを相対パスで指定すると面倒な例

CSSを「相対パス」で指定すると、以下のようになります。

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">

この場合「http://www.sample.com/index.html」から「http://www.sample.com/css/style.css」を参照した例です。

しかし、「相対パス」だと・・・

「http://www.sample.com/a/index.html」から「http://www.sample.com/css/style.css」を参照したい場合は

<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/style.css">

このように記述しなければなりません。

面倒くさいかは、ともかくとして、これは「凡ミス」の原因になります。

CSSを絶対パスで指定すると簡単だという例

「絶対パス」では、そのような面倒はありません。

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/style.css">

どこの階層からでも、上記のように記述するので、間違いが起こりづらく、階層構造を考えるのも簡単です。

頭「.」（ドット）のない「/」（スラッシュ）から始まるパスはルートからの絶対パスだと考えておけば良いので、ドメインのないURLのように扱うことができます。

(1) http://www.sample.com/css/style.css
(2) /css/style.css

上記はどちらも「絶対パス」ですが、同じ場所を示しています。
ドメイン引っ越しがあっても問題ありませんね。

PHPを使うWordpressとも相性が良い

PHPはひな形ファイルを参照して、HTMLを動的に表示するプログラムになります。

たとえば

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="">

CSSを呼び出す場合は「bloginfo(‘template_url’)」や「bloginfo(‘stylesheet_url’)」を使って、絶対パス（httpで始まる）で出力されます。

ということは、デザインHTMLを制作する時点で「絶対パス」を使って記述しておく方が、プログラマには優しい記述になります。

また、この出力されるパスが「http://www.sample.com」のように、最後に「/」のない出力になりますので

デザインHTMLで

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/style.css">

と書いておけば

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="">

PHPを差し込むだけで作業が終わる利点もあります。

なぜ、Wordpressではスタイルシートの参照パスを絶対パスで表記するのでしょうか？
Wordpressのテーマファイル(HTML/CSSなど)は階層の奥深くに格納されます。それをPHPで動的にルートのindex.htmlとして出力したりしています。出力したindex.htmlの中でCSSの参照を相対パスで書いてしまうと、テーマファイルが格納されている奥底の階層に届くことができません。

「ひな形」ファイルの格納されているパスと、それを使って出力したHTMLファイルは必ずしも同じ階層にはならないので、このようなことが起こります。

そこで、絶対パスで書いてやることで、見ているページがどんな階層のURLでも、必ずテーマファイルのあるパスを参照してくれるのです。

ただし、この方法は従来の「base href=”URL”」を使った方法は使えません。

<base href="http://www.sample.com/">

たとえば、上記のようなタグをHTMLの最初に書いておく方法ですが、これはHTMLファイル内でリンク関係は相対パスで書かれている場合にしか効果がないからです。

HTMLでは相対パスより絶対パスの方がおすすめ

「相対パス」でも、すべてのHTMLがルートにあるようなファイル構成にしていれば、相対パス記述でミスることはありません。

しかし、細かく階層を切ってHTMLを格納していく方法はおすすめではないと言っても、必ずしも全HTMLファイルをルートで扱えない場合もあります。

その、多くはCGIを使う場合です。（Wordpressも同様で、要するにひな形としてHTMLファイルを出力する場合）

しかし、「絶対パス」の方が、どこから参照しても同じ記述になるという利点があるのは事実です。

HTMLを記述する場合は、パス(PATH)の考え方を「絶対パス」にしておくと、間違いなどもなくなり楽になります。

HTMLでは相対パスより絶対パスの方が「理解しやすい・
わかりやすい」という点ではおすすめです。

HTMLでは絶対パスより相対パスの方がおすすめな例

真逆の話になりますが「相対パスの方がおすすめ」なやり方もあります。

それは、「HTMLファイルはすべて最上位階層に設置する」方法です。

この場合、「CSS」や「JS」ファイルはどのHTMLから参照しても同じパス記述で書けるので、「相対パス」でも苦になりません。

昔はHTMLファイルを分類ごとにディレクトリ階層で分けた開発が多かったのですが、それをやると前述のように「CSS」や「JS」ファイルの参照先を「../css」のようにHTMLごとに変えて記述しなければなりませんでした。

これは非常に面倒くさいので、「HTMLファイルはすべて最上位階層に設置する」方法が本来は一番無難な方法です。

この場合であれば、絶対パスより相対パスの方がおすすめです。

WordPressのひな形ファイル化にする場合でもHTMLの先頭に

<base href="/">

と入れるだけで相対パスがテーマフォルダの内容を参照してくれるからです。

これなら「CSS」や「JS」ファイルの参照先も相対パスで書くことができます。

まとめ

・静的利用やHTMLファイルを階層管理するなら「絶対パス」がわかりやすい
・動的利用もしくはHTMLファイルをルートですべて管理するなら「相対パス」がわかりやすい

これからワードプレスのテーマファイルを開発したり、CGI開発を前提にするなら、HTMLはルートですべて管理するというポリシーを徹底して、相対パスを使う方が良いでしょう。

「難しくない！おすすめのWebデザイン（開発）ポリシー」も合わせてお読みいただくと理解が深まると思います。

---

最新記事はトップページで！

---