プログラミング勉強日記
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>