※ ChatGPTを利用し、要約された質問です(原文:CSSで相対パス)
CSSで相対パスの設定方法と注意点
このQ&Aのポイント
CSSで相対パスを設定する際の基準となるフォルダは、外部スタイルシートが配置されているフォルダではなく、呼び出し元のファイルが配置されているフォルダです。
相対パスを使用して別のフォルダにあるイメージを呼び出す場合、../を使用して上位の階層に移動し、その後のパスで対象のイメージに到達します。
大量にネストされた外部スタイルシートの場合、相対パスを設定するのが煩雑になるため、ネストの深さに応じてパスを記述する必要があります。
さっきニコニコ動画のスタイルシート見たんですけど、
こういう記述があって
body.tpl {
width:960px;
background:#FFF url('/img/tpl/bg_rc2.gif') repeat-x;
color:#333;
margin:0px auto;
padding:0px;
}
このスタイルシートはcssというフォルダの中にあって、
そこと同じ階層にimgというフォルダがあって、
あとは直接index.phpとかのメインのファイルが置いてあるみたいなんですけど、
普通外部スタイルシートから別のフォルダ(同じ階層にある別のフォルダ)にあるイメージを呼び出すなら
../img/tpl/bg_rc2.gif
になるはずだと思うんですけど、上の記述だとまるでCSSの相対パスのベースが上位の階層(index.phpとかのメインのファイルがあるの階層)になってるみたいにに見えるんですよね、
もしこれが出来るなら、大量にネストして外部スタイルシート作ってある場合(imgフォルダから遠い階層)、
../../../../../../img/a.gif
って呼び出さないといけないのが楽にすむじゃないですか、
もし外部スタイルシートの相対パスのベースをこういう風に設定できる方法があるならおしえて下さい、
俺の勘違いだったらごめんなさい
お礼
そうですよね、相対パスなら/スラッシュ付きませんもんね。 完全に解決しました、朝早くありがとうございます。