プログラミング勉強日記

2021年3月15日

@importとは

　外部のCSSファイルを読み込むときに使う。CSSファイルが１つだと記述量が多くなってしまうので、ファイルを分割するときに使われる。

@importの使い方

/* 同じ階層にファイルがあるとき */
@import url("cssファイル名");

/* 違う階層にファイルがあるとき */
@import url("cssファイルが入ってるフォルダ名/cssファイル名");

サンプルプログラム

　最初にheader.cssとbody.cssファイルを作る。
　次に、main.cssを作成してheader.cssとbody.cssも@importで読み込む。

main.css

@import url("./header.css");
@import url("./body.css");

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    // main.cssの読み込み
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
  </body>
</html>

参考文献

@import
外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】