プログラミング勉強日記

2021年3月15日

@importとは

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

@importの使い方

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

サンプルプログラム

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

main.css

@importurl("./header.css");@importurl("./body.css");

HTMLファイル

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

参考文献

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