CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの@importルールで外部スタイルシートを読み込む方法

CSSでは、別のCSSファイルの中にさらに外部のスタイルシートを読み込むことができます。この目的に使用されるのが@importルールです。@importは、ドキュメント内でスタイルシートをリンクする役割を持ち、一般的には、あるスタイルシートが別のスタイルシートに依存している場合などに活用されます。

@importルールは、<head>要素内の@charset宣言の直後、かつスタイルシートの先頭に記述する必要がある点に注意してください。他のルールより後に記述すると無効になるため、必ず最初に書くようにしましょう。

基本構文

@importルールの構文は以下のとおりです。

@import /*urlまたはメディアクエリのリスト*/

メディアクエリには複合条件を指定することもでき、これにより画面サイズやデバイスの種類など、異なるメディア環境ごとのスタイルの適用動作を細かく制御できます。

使用例1：HTML内のstyleタグからインポートする

以下の例では、HTML文書内の<style>タグの中で@importルールを使い、外部のCSSファイル（style.css）を読み込んでいます。

HTML文書

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
    background-color: honeydew;
}
</style>
</head>
<body>
<p>これはデモ用の段落その1です。</p>
<p class="two">これはデモ用の段落その2です。</p>
<p>これはデモ用の段落その3です。</p>
</body>
</html>

CSS文書：style.css

p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }

表示結果

上記のコードを実行すると、すべての段落に外部CSSのスタイルが適用され、次のような出力になります。

  • 通常の段落：紺色（navy）の斜体テキストで表示される
  • class「two」が付いた段落：濃緑色（darkgreen）・24pxの文字サイズで表示される

使用例2：linkタグで読み込んだCSSからさらにインポートする

次の例では、HTML側で<link>タグを使って外部CSSを読み込み、そのCSSファイル内でボックスの装飾スタイルを定義しています。

HTML文書

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>

CSS文書：style.css

div {
    height: 50px;
    width: 100px;
    border-radius: 20%;
    border: 2px solid blueviolet;
    box-shadow: 22px 12px 3px 3px lightblue;
    position: absolute;
    left: 30%;
    top: 20px;
}

表示結果

このコードを実行すると、青紫色（blueviolet）の枠線と水色（lightblue）の影を持つ角丸のボックスが、指定した位置に表示されます。

@importとlinkタグの使い分けのポイント

@importは便利な機能ですが、読み込みが直列的に処理されるため、ページ表示速度に影響を与える場合があります。パフォーマンスを重視する場合は、HTMLの<link>タグで並列に読み込む方が推奨されます。一方、CSSファイルを目的別に分割して管理したい場合や、条件付きでスタイルを読み込みたい場合には、@importが有効です。用途に応じて適切に使い分けましょう。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"