1. ホーム
  2. html

[解決済み] CSSファイルで相対URLを使用していますが、どの位置からの相対位置なのでしょうか?

2022-03-18 06:09:20

質問

CSSファイルで背景画像の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

解決方法は?

によると W3 :

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

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

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