CSS ファイルで相対 URL を使用する場合、どの場所を基準にしているのでしょうか? 質問する

CSS ファイルで相対 URL を使用する場合、どの場所を基準にしているのでしょうか? 質問する

CSS ファイルで背景画像の URL などを定義するときに相対 URL を使用する場合、その URL はどこを基準にしているのでしょうか? 例:

ファイルに次の/stylesheets/base-styles.css内容が含まれているとします。

div#header { 
    background-image: url('images/header-background.jpg');
}

このスタイルシートを別のドキュメントに組み込む場合、<link ... />CSS ファイル内の相対 URL はスタイルシート ドキュメントを基準にしたものになるのでしょうか/stylesheets/、それとも組み込まれている現在のドキュメントを基準にしたものになるのでしょうか。考えられるパスは次のようになります。

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

ベストアンサー1

によるとW3:

部分的なURLは、ドキュメントではなくスタイルシートのソースを基準として解釈されます。

したがって、あなたの質問に対する答えは、 に相対的なものになります/stylesheets/

考えてみれば、これは理にかなっています。CSS ファイルは異なるディレクトリのページに追加される可能性があるため、CSS ファイルに標準化すると、スタイルシートがリンクされている場所であればどこでも URL が機能することになります。

おすすめ記事