豆知識

絶対パス・相対パス

HTMLやCSSに限ったことではないのですが、ファイルの場所（パス）を記述する方法について。

絶対パス

ファイルの絶対的な位置を表現します。

例えば、

<a href="http://google.co.jp"> ・・・</a>

p { background: url("http://web-mame.net/test.png"); }

のような http://～ から始まる指定は絶対パスでの指定になります。

また、ルートディレクトリを基準として位置を表現することも絶対パス指定と呼びます。例えば、

ファイル構成の例

のような構成があったとします。このとき、http://web-mame.net/がルートディレクトリとなります。

test.htmlからtest.cssを絶対パスで指定するには、次の２通りの記述が出来ます。

  • <link href="http://web-mame.net/css/test.css" ・・・
  • <link href="/css/test.css" ・・・

絶対パスで指定をするには、「/（スラッシュ）」から始めます。つまり、スラッシュの前にはルートディレクトリのパスが省略されているのです。

ディレクトリ（Directory） ― Windowsでは「フォルダ」と呼んでいます。UNIXなどのOSでは、これを「ディレクトリ」と呼んでいます。

相対パス

絶対パスに対して、相対パスという表し方もあります。相対パスは、呼び出し側のファイルの位置を基準とした相対的なファイルの場所を表現する方法です。

絶対パスのときと、同じ例で話を進めます。

test.htmlからtest.cssを相対パスで指定するには、次のように記述します。

  • <link href="./css/test.css" ・・・

「./」は、自分がいるディレクトリという意味を表しています。また、「./」は省略できるので

  • <link href="css/test.css" ・・・

のように記述することが出来ます。

もう一つ、覚えておくことがあります。例えば、test.cssからpic1.pngを指定する場合を考えます。この場合、次のように記述することでpict1.pngの位置を指定することが出来ます。

  • background: url("../images/pic1.png") ・・・

「../」は、一つ上の階層のディレクトリを意味します。

どちらを使うべきか

どちらを使用しても、結果（表示結果）に変わりは無いので、好きな方を使用すれば良いでしょう。

絶対パスを使用するなら、参照元のファイルは自由に移動させることが出来ます。しかし、参照先のファイルを移動した場合は、パスを書き直さなければなりません。

相対パスを使用するなら、参照元・参照先の関係を崩さない範囲ならば自由に移動させることが出来ます。しかし、参照元・参照先の関係が一度崩れてしまうと、修正が大変になるでしょう。

結論としては、適した方を使い分けるべきです。・・・適した方、というのは、うまく説明できないので、ご自身で判断を・・・^^;

絶対パスを使用した場合、ローカル環境でのチェックを行う場合はAN HTTPDなどのサーバーソフトでルートディレクトリを指定してあげる必要があります。詳しくは↓

AN HTTPD

AN HTTPDはWindows用のサーバーソフトです。これを使えば、ローカル環境で絶対パスで指定したファイルのリンクチェックや、CGI, PHPの動作確認が行えます。

まずは、インストールしてみましょう。

自己解凍形式でも、普通のZIP形式でも、お好きな方で構いません。

ダウンロードしたファイルを、適当な場所（C:\Program Files\AnHTTPd など）に展開します。

httpd.exeがAN HTTPDの本体となります。

例えば、

ファイル構成の例

のような構成になっていて、Cドライブ直下にあるlocal_rootというディレクトリをルートディレクトリに設定する手順は次の通りです。

  1. まず、AN HTTPDを起動する。
  2. メニューバーの オプション(O) - 一般(G)... とすると、設定ダイアログが開く。（タスクトレイに最小化している場合は、アイコンを右クリックして オプション(O) 一般(G)... をクリックする。）
  3. ダイアログの「一般」タブの「ドキュメントルート:」のインプットボックスの内容を「c:\local_root」に変更する。
    AN HTTPD設定ダイアログ
  4. OKボタンを押すと、サーバーが再起動する。

実際にアクセスするには、「http://localhost/」がルートディレクトリのアドレスとなるので、ブラウザのアドレス欄に「http://localhost/test.html」と入力すれば、test.htmlの内容を表示することが出来ます。（ただし、AN HTTPDを起動させている必要があります。）

CGI, PHPなどの動作確認を行うには、Perl, PHPの導入&AN HTTPDの設定が必要になります。解説を行っているサイトはいくつもありますので調べてみてください。

AN HTTPDをしばらく使って使い方が分かったのならば、Apacheの導入にも挑戦してみてください。Apacheは現在多くのサーバーで利用されているサーバーソフトです。解説サイトはいくつもありますので、それらを参考に。