絶対パスやら相対パス
画像やら外部CSSやら、ファイルを読み込む時はそのファイルの場所を指定します
その時の指定方法には2パターン存在しているのでそれを説明します。
絶対パス
サーバのドキュメントルートから見てどの位置にあるかという指定をします。
※ドキュメントルート
いわゆる公開している範囲=ブラウザで見れる場所,という認識でOKです
/cmn/img/test01.jpg
先頭スラッシュから始まります。
相対パス
現在のファイルの位置から見てどの位置にあるかという指定をします。
/* 1階層上 */ ../cmn/img/test01.jpg /* 2階層上 */ ../../cmn/img/test01.jpg /* 同一階層 */ ./cmn/img/test01.jpg または cmn/img/test01.jpg
../とすると一階層上に上がります。続けるとその分どんどん上がっていきます。
同一階層の記述方法はどちらでもよいです。好みの方でお使いください
※同一階層の記述方法、ベルメゾン様案件では ./の指定方法が何故かNGとかってルールがあったりします。ふしぎ
どっちを使えばよいのですか?
指定方法によって速度だったりが変わる事はありません。
なので特に考えなくてもいいんじゃないか!で正解ですが、一応以下懸念点、とは言いませんがこんな事考えたりします。
例えば
hoge ┣ css ┃ ┗ style.css ┗ index.html
というコンテンツ。hoge内で全て完結しており、cssファイルを読み込む記述を【絶対パス】で記述している場合
※/hoge/css/style.css とします。
[ hoge ] をコピーして以下のように配置します。
hogehoge ┗hoge ┣ css ┃ ┗ style.css ┗ index.html
そのままコピーすると
/hoge/css/style.css で読み込もうとしますが、ドキュメントルートには [ hogehoge ]しかなく、[ hoge ]は存在していません。
なので書きなおす必要が発生するのです。
ファイル数が増えればめんどくさいですよね
相対パス最高や!絶対パスなんていらんかったんや!
答えはノーだ。
hoge ┣ css ┃ ┗ style.css ┗ hoge2 ┗ hoge3 ┗ hoge4 ┗ hoge5 ┗ hoge6 ┗ index.html
上記のように深い階層にあるhtmlから上の方の階層にあるCSSを読みに行く場合
相対パスだと
../../../../../../css/style.css
と記述しなければならない。
長いし、パッと見て場所分からないし、間違えるかもしれない
そんな時は絶対パス
/hoge/css/style.css
シンプルですね(´・ω・`)
そんなわけで時と場合に応じて適当に使い分ければよいと思いました。そんな感じでいいのではないでしょうか