@importで複数のCSSファイルを読み込む

複数のCSSファイルを読み込む場合、 HTMLファイルから複数のCSSファイルを読み込む方法と、 @importを使って、 1つのCSSファイルからまとめて読み込む方法があります。

Web開発において、後からCSSファイルが増えることは良くあることです。 ですから後々のメンテナンスを考えると、CSSファイルが複数ある場合は、 @importを使ってまとめて読み込むことをおすすめします。

@importの記述方法

@import url("style1.css");

@importの後に、url関数を使い、引数としてファイルパスを指定します。 ファイルパスは絶対パス、相対パスのどちらでも大丈夫です。

相対パスの場合の基準は?

ファイルパスを相対パスで記述する場合は、 読み込むCSSファイルからの相対パスを記述します。 HTMLファイルからのパスではありません。

例えば test.htmlが test.css を読み込んで、 test.cssがstyle1.css、style2.cssを読み込む場合、 test.cssを基準とした相対パスを記述します。

@importで読み込む

@importの記述例

test.cssからstyle1.css、style2.cssを読み込む場合は、 次のように記述します。

test.css
@charset "UTF-8";
@import url("style1.css");
@import url("style2.css");