【@import】CSSファイルから別のCSSファイルを読み込むには？

HTMLにCSSを適用させるとき、HTMLファイルから外部CSSファイルを読み込ませるのはお馴染みですね。

また、HTMLファイルから読み込んだCSSファイルから、別のCSSファイルを読み込むこともできます。

今回は、CSSファイルから別のCSSファイルを読み込ませる方法と、そのデメリットについてざっくりとまとめています。

CSSファイルから
CSSファイルを読み込む書き方

CSSファイルから別のCSSファイルを読み込む場合は「@import」を使います。

注意点としては、「@import」は必ずCSSファイルの最初に書くこと。

「@import」より上に書いても良いのは、CSSファイルの文字コード宣言「@charset」のみです。

ファイルの途中や下に書いても正常に動作しないので気をつけましょう。

@charset "UTF-8";
@import url("sample.css");

CSSファイルのURLは、絶対パスか、このCSSファイルから見た相対パスを書きます。

HTMLファイルから見たパスではないので注意しましょう。

上の記述の場合では、同じ階層にある「sample.css」を読み込んでいます。

1つ上の階層にあるなら「../sample.css」となります。

同じ階層の「sample」フォルダ内にあるファイルを読み込む場合では「sample/sample.css」となります。

@importのデメリット

「@import」を使うと、「@import」されたCSSファイルの読み込みが完了するまで、元のCSSファイルの読み込みはストップしてしまいます。

CSSの適用がモタつく原因になるので、通常は多用しません。

一方、HTMLファイルから複数のCSSファイルを読み込む場合は、ほぼ同時に全てのCSSファイルを読み込めます。

少しでも速くCSSを適用したい時は、できるだけHTMLファイルから直接読み込むようにしましょう。

「@import」の使いどころとしては、ローカル環境でサイトを作成中に、所定の場所にある1つのCSSファイルを使い回したい時などに非常に便利です。