外部のCSSファイルを読み込む(@import)

書式

■読み込ませる外部CSSファイル内に@importを記述
@import url("読み込ませるCSSファイルのURL");

説明

link要素で読み込ませたCSSファイルから、さらに別のCSSファイルを読み込ませるには@importを使います。@importの後にurl()を記述し()内に読み込ませたいCSSファイルのURLを指定します。なお、@importの末尾の;(セミコロン)は必須です。
@importは全てのブラウザが対応しています。なお、IE9より前のIEでは@importで読み込ませる事ができるファイル数に制限(link要素が1つなら31個。合計32個)があります。また、@importで読み込ませる場合、ネスト(深さ)にも制限があります(目安として3階層くらいまで)。

サンプル サンプルを実行 サンプルをダウンロード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3例文辞典サンプル</title>
<link rel="stylesheet" href="css/main.css"">
<body>
<h1>CSS3 Sample</h1>
<p>見出し文字の色が赤色になります</p>
</body>
</html>
目次に戻る