CSSのurl/@import の相対パスの扱い

結論を言えば、そのファイルからの相対パスになる。

import は便利なんだけど、URLの相対パスを見失いないがち。

import のimport した場合の相対パス記述
import import された url() の記述で迷った。

import しすぎはパフォーマンス的にもよくないのでやらないのですが、import 大好きっ子がいたので困りました。

takuya@rena:~/Desktop/css_test$ tree -r
.
├── index.html
├── imgs
│   └── red-circle.png
├── css
│   ├── 3.css
│   └── 2.css
└── 1.css

HTMLファイル：1.cssを取り込む。

import する

<!DOCTYPE html>
<html>
<head>
     <title>CSSテスト</title>
     <link rel="stylesheet" href=“./1.css">
</head>
<body>
<h1>ここはタイトル</h1>
</body>
</html>

1.css は 2.cssを読み込む

@import “./css/2.css”

2.cssは3.css を読み込む

@import “./3.css”

3.css は画像を読み込む。

body {
     background-image: url(../imgs/red-circle.png);
}

2.css からみた3.cssの相対パスになる。HTMLからみた3.cssへの相対パスではない

url( image ) するばあい

url を書いた場合、url記述ファイルから見た相対パスになる。

C言語のincludeマクロや php のinclude やRubyのload/require は、呼び出し元ファイルのCurrent Directoryが相対位置の基準に対し、HTMLでは各ファイルが相対基準になっているようです。

それマグで！