CSS/@import

@import

@importルールは、外部スタイルシートを現在のスタイルシートに読み込むために使用されます。このルールを使うことで、複数のスタイルシートを分割して管理しやすくしたり、再利用性を高めたりすることができます。

概要

@importは、他のCSSファイルを参照してインポートするための方法を提供します。インポートされたスタイルは、現在のスタイルシートの内容と結合され、ページ全体に適用されます。

• 記述場所: @importルールは、CSSファイルの最上部（他のルールより前）に記述する必要があります。
• 形式: URLやメディアクエリを指定することができます。

書式

@importルールの基本構文は以下の通りです：

@import "<URL>";
@import "<URL>" <メディアクエリ>;

• <URL>: インポートするCSSファイルのURLまたはパス。
• <メディアクエリ>: スタイルを適用する条件（例: screen, print, max-widthなど）。

使用例

以下に@importの使用例を示します。

基本的な例

@import "styles.css";

この例では、styles.cssという外部CSSファイルを現在のスタイルシートに読み込んでいます。

メディアクエリを指定する例

@import "print-styles.css" print;
@import "responsive-styles.css" screen and (max-width: 768px);

この例では、print-styles.cssは印刷用スタイルとして、responsive-styles.cssは画面幅が768px以下の場合に適用されます。

URLを指定する例

@import url("https://example.com/styles.css");

この例では、外部サーバーからstyles.cssをインポートしています。

注意事項

1. パフォーマンスの問題:

   @importを多用すると、ブラウザがCSSファイルを順次読み込むため、ページの読み込み速度が低下する可能性があります。複数のCSSファイルを読み込む場合は、HTMLの<link>要素を使用する方が効率的です。

2. ブラウザの互換性:

   すべての主要なブラウザでサポートされていますが、古いバージョンのブラウザでは部分的な制限がある場合があります。

3. インポートの順序:

   スタイルの優先順位は、@importの記述順に依存します。

HTMLとの比較

以下は、HTMLの<link>要素と@importを比較した例です。

@importの場合

@import "styles.css";

HTMLの<link>要素の場合

<link rel="stylesheet" href="styles.css">

違い

• <link>はHTMLの一部としてCSSを読み込みますが、@importはCSS内で指定します。
• <link>の方がパフォーマンスに優れ、非同期でスタイルを読み込むことができます。

使用のベストプラクティス

• 小規模なプロジェクトでは、@importを使用して簡易的にスタイルシートを分割できます。
• 大規模なプロジェクトでは、<link>要素を使用するか、ビルドツールを使用してスタイルシートを統合することを検討してください。

関連情報

• MDN: @import
• W3C: Importing Style Sheets: the @import rule
• Can I use: CSS at-rule: @import

@importは、簡単にスタイルシートを再利用するための便利な手段ですが、パフォーマンス面を考慮して適切な状況で使用することが重要です。