CSS 属性 @import：外部スタイルシートのインポート
@import ルールは、あるスタイルシートを別のスタイルシートにインポートすることを可能にします。これは、CSSコードを複数のファイルに分割し、コードの保守性を向上させるのに役立ちます。
@import ルールの構文
@import ルールの基本的な構文は以下の通りです。
- キーワード
@importを使用する。 - 外部スタイルシートのURLを単一引用符または二重引用符で囲む（省略可能）。
- 相対URLまたは絶対URLを使用できる。
- メディアクエリを使用して、スタイルシートを適用するメディアタイプを指定できる（省略可能）。
構文例：
@import "style.css";
@import url("style.css");
@import 'https://www.example.com/style.css';
@import url("style.css") screen and (max-width: 600px);
@import ルールの位置
@import ルールは、スタイルシート内の他のすべてのルール（@charset ルールを除く）の前に記述する必要があります。
| 誤った例 | 正しい例 |
|---|---|
|
|
@import ルールの利点と欠点
利点
- CSSコードの整理： CSSコードを複数のファイルに分割することで、コードの可読性と保守性が向上します。
- オンデマンドでのスタイルシートの読み込み： メディアクエリを使用すると、デバイスや画面サイズに応じて異なるスタイルシートを読み込むことができます。
欠点
- パフォーマンスの問題：
@importを使用すると、追加のHTTPリクエストが発生するため、ページの読み込み時間が長くなる可能性があります。 - ブラウザの互換性の問題： 一部の古いブラウザでは、
@importルールがサポートされていない場合があります。
@import と <link> タグの比較
@import ルールと <link> タグはどちらも外部スタイルシートをインポートするために使用できますが、いくつかの重要な違いがあります。
| 特徴 | @import |
<link> |
|---|---|---|
| 種類 | CSSルール | HTML要素 |
| 記述位置 | スタイルシートの先頭のみ | HTMLの <head> タグ内 |
| パフォーマンス | 低い | 高い |
| 並列ダウンロード | 不可 | 可能 |
<link> タグを使用したHTMLの例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
ベストプラクティス
- パフォーマンスと互換性の観点から、外部スタイルシートのインポートには
<link>タグを使用することをお勧めします。 - 非常に古いブラウザとの互換性が必要な場合など、特定のケースでのみ
@importルールを使用してください。
まとめ
@import ルールは、外部スタイルシートをインポートする方法の1つですが、パフォーマンスや互換性の面でいくつかの欠点があります。そのため、基本的には <link> タグを使用し、必要に応じて @import ルールを使用することをお勧めします。
関連リソース
よくある質問
- Q:
@importルールはなぜパフォーマンスが悪いのですか？
A:@importルールは、ブラウザがHTMLの解析を完了した後にCSSファイルのダウンロードを開始するため、ページの表示が遅れる可能性があります。一方、<link>タグはHTMLの解析中にCSSファイルをダウンロードできるため、ページの表示速度が向上します。 - Q:
@importルールと<link>タグのどちらを使うべきですか？
A: 特に理由がない限り、<link>タグを使用することをお勧めします。<link>タグは、パフォーマンス、ブラウザの互換性、保守性の面で優れています。 - Q:
@importルールを使うべきケースはありますか？
A: 非常に古いブラウザとの互換性が必要な場合や、JavaScriptを使用して動的にスタイルシートを読み込む必要がある場合など、特定のケースでは@importルールが有効な場合があります。