CSSの@importルールの使い方：外部スタイルシートを読み込む基本

@importルールとは

CSSの@importルールは、別のスタイルシートを現在のスタイルシートに読み込むための仕組みです。このルールは、スタイルシート内の他のすべてのルールよりも前に、必ず先頭に記述する必要があります。指定する値は、読み込みたいファイルのURLです。

記述例

@importルールは、以下のように記述します。

<style>
   <!--
      @import "mystyle.css";
      または
      @import url("mystyle.css");
      .......その他のCSSルール.....
   -->
</style>

URLをそのまま引用符で囲んで指定する方法と、url()関数を使って指定する方法の2通りがあります。どちらの書き方でも動作は同じです。

@importルールを使うメリット

@importルールの大きな利点は、スタイルシートをモジュール化して管理できることにあります。たとえば、レイアウト用・色定義用・タイポグラフィ用など、目的ごとに複数のスタイルシートファイルを作成しておき、必要なページでそれらを読み込むだけで再利用できます。

これにより、コードの重複を減らし、保守性の高いCSS設計が可能になります。サイト全体で共通のデザインパーツを持つ場合や、大規模なプロジェクトでスタイルを分割管理したい場合に特に有効です。

注意点

@importルールは@charset以外のすべてのルールより前に置く必要があります。また、読み込まれたスタイルシートは順番に処理されるため、多数のファイルを連鎖的にインポートすると表示速度に影響を与えることがあります。パフォーマンスを重視する場合は、HTML側で<link>タグを使って並列に読み込む方法も検討するとよいでしょう。