CSS ファイル内の相対パスは CSS ファイルを基準にしていますか?

CSS を使用する場合、画像やその他の外部ファイルを参照する場合CSS ファイルは一般的な方法です。これらの参照の相対パスを理解することは、ファイルを適切な場所に配置するために非常に重要です。

CSS の相対パス: 詳細を見る

CSS ファイルの相対パスは、次の相対パスです。 CSS ファイルを使用する HTML ファイルではなく、CSS ファイル自体です。つまり、画像や別のファイルのパスを指定する場合は、CSS ファイルが配置されているディレクトリから始まるパスを指定する必要があります。

例で理解する

この概念を実証するには、次のレイアウトを検討してください:

• ページ: page.htm (場所: ではありません) matter)
• CSS: /resources/css/styles.css
• Image: /resources/images/image.jpg

CSS ファイル内 (styles. css):

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

この例では、CSS ファイル内の画像 (image.jpg) へのパスは ../ で始まります。これは、CSS ファイル (styles.css) の場所から「1 つ上のディレクトリに移動」し、画像が保存されている画像ディレクトリに移動することを意味します。