非常に初歩的だけど、よくやる間違い

　cssとjavascriptを外部ファイルにしたとき、それぞれのファイル内での相対パスの指定について、混乱することがよくあります。こんなことが分からなくなる人は私の外にはまずいないでしょうが、したがってこのエントリを必要とする人もまずいないでしょうが、広くウェブ上に公開するという意識で書き残しておくことで忘れにくくなる効果に期待して、ちょっと整理してみたいと思います。

　例えば、下のようなディレクトリ構成があり、sample.htmlはhoge.jsとstyle.cssをそれぞれ外部ファイルとして読み込んでいるとします。

　この時、hoge.jsとstyle.cssがそれぞれimg.gifという画像ファイルを使うとします。この時、style.cssから相対パスでimg.gifを指定する場合、[../img/img.gif]と指定します。style.cssからの相対パスそのままですので、これは理解しやすいと思います。

　しかるに、hoge.jsから相対パスでimg.gifを指定する場合、相対パスは[./img/img.gif]となってしまいます。つまり、jsファイルが読み込まれるhtmlファイルの位置からの相対パスになっているのです。このあたり、私はよく混同してしまい、無為に時間をつぶしてしまったりします。

　何故こうなってしまうのか、私にはよくわかりません。もし理解できたらまたブログに書きたいと思います。