phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

ルート相対パス!!?

15 years ago

最近ルート相対パスなるものを知った。 衝撃的だった。自分の無知さに対して. 今更って感じだがまとめておく.

あるときふと思った, 大規模なサイトはディレクトリ構造をどうしてるんだろう?と

フォルダが増えると「../」が増えてややこしくなってくるし, 簡単に階層を変えれなくなってしまう. かといって絶対パスにしちゃうとドメインやフォルダ名に依存しすぎてしまう.

とか思っていた.

だがそんな問題はルート相対パスが解決してくれた.

ルート相対パス

これは、/ から始めるとルートディレクトリを基準にアクセスしてくれるというものである.

具体的には, http://hoge.com がルートディレクトリだった場合、 / から始めさえすればどのサブディレクトリからでも http://hoge.com を基準としてファイルにアクセスできるということである.

私は今まで, http://hoge.com/programming/c/opengl/index.html から http://hoge.com/img/hoge.png にアクセスする際に

<img src="../../../img/hoge.png" alt="ほげ" width="100" height="100" />  

と書いていた。

だが、ルート相対パスを使えば

<img src="/img/hoge.png" alt="ほげ" width="100" height="100" />  

とキレイに書ける.

このメリットは大きい.

全体のサイトを通して使用する css ファイルや js ファイル, 画像などは ルートディレクトリ直下に作ったフォルダ内に入れて管理することができる.

なによりサブディレクトリの自由度がかなり上がる. どれだけネストした階層からでも /index.html と書けば ホームページへのリンクにつながる。 階層動かし放題, 名前変え放題である(あまり関心しないが)

以上, 今更メモでした.

※あくまでサーバを通さないとブラウザはルートディレクトリを認識してくれないので Apache などを使わずローカルで開発している場合, ルート相対パスは使えないのでご注意を.

追記

baseというタグを使えばいけるかも!! その辺別途調べて記事書きます.