CSSの@importルールで別のスタイルシートからスタイルを読み込む方法

@importルールとは

CSSでは、@importルールを使用することで、別のスタイルシートに定義されたスタイルを取り込む（インポートする）ことができます。これにより、共通のデザインを複数のページやプロジェクトで再利用しやすくなります。

重要なポイントとして、@importはスタイルシートの冒頭、他のすべてのCSSルールより前に記述しなければなりません。指定する値は、読み込みたいスタイルシートのURLです。

基本的な書き方

@importは、次のように記述します。

<style>
    <!--
        @import "mystyle.css";
        または
        @import url("mystyle.css");

        /* その他のCSSルール */
    -->
</style>

URLは引用符（" "）で囲む形式と、url()関数で囲む形式のどちらでも指定可能です。どちらの書き方でも動作は同じですが、チーム内で表記を統一しておくと可読性が向上します。

@importルールのメリット

@importルールの最大の意義は、スタイルシートをモジュール化して開発できる点にあります。

• 役割ごとの分割： レイアウト用、色テーマ用、タイポグラフィ用など、目的別にスタイルシートを作成できます。
• 再利用性の向上： 作成した各スタイルシートは、必要なページやプロジェクトで自由に読み込めます。
• 保守性の向上： 変更が必要な場合は該当するファイルだけを修正すればよいため、管理がしやすくなります。

利用時の注意点

@importは読み込みが直列的に処理されるため、多用するとページの表示速度に影響を与える場合があります。パフォーマンスが重視される本番環境では、HTML側で<link>タグを使ってスタイルシートを読み込む方法も検討するとよいでしょう。