【CSS Modules】@importアットルールの使い方

Copy
1/*
2 * 別のCSSファイル (例: styles/reset.css) を現在のスタイルシートに読み込みます。
3 * これにより、ブラウザのデフォルトスタイルをリセットするCSSが適用されます。
4 * `@import` ルールは、スタイルシートの先頭 (文字セットルールを除く) に記述する必要があります。
5 */
6@import url("styles/reset.css");
7
8/*
9 * 別のCSSファイル (例: styles/theme.css) を読み込み、
10 * サイト全体の共通テーマや基本スタイルを適用します。
11 */
12@import url("styles/theme.css");
13
14/*
15 * ここから、このスタイルシート内で直接定義されるCSSルールです。
16 * 上記で読み込まれたスタイルは、これらのルールよりも先に適用されます。
17 */
18
19/* body要素に対する基本スタイル */
20body {
21  /* フォントファミリーを指定します。'Helvetica Neue'がなければ'Arial'、それもなければ一般的な'sans-serif'を使用します。 */
22  font-family: 'Helvetica Neue', Arial, sans-serif;
23  /* 背景色を薄いグレーに設定します。 */
24  background-color: #f4f4f4;
25  /* テキストの色を濃いグレーに設定します。 */
26  color: #333;
27  /* ボディの内側に20pxの余白を設定します。 */
28  margin: 20px;
29}
30
31/* h1要素に対するスタイル */
32h1 {
33  /* 文字色を青に設定します。 */
34  color: #007bff;
35  /* テキストを中央揃えにします。 */
36  text-align: center;
37  /* 下方向に25pxの余白を設定します。 */
38  margin-bottom: 25px;
39}
40
41/* p要素に対するスタイル */
42p {
43  /* 行の高さを1.6倍に設定し、読みやすくします。 */
44  line-height: 1.6;
45  /* 最大幅を800pxに制限し、中央揃えにします。 */
46  max-width: 800px;
47  margin-left: auto;
48  margin-right: auto;
49  /* 上方向に20pxの余白を設定します。 */
50  margin-top: 20px;
51}

CSSの@importルールは、現在のスタイルシートに外部のCSSファイルを読み込むために使用するアットルールです。これにより、複数のCSSファイルをモジュールとして分割し、一つのスタイルシートに統合して適用することが可能になります。例えば、リセット用のスタイル、共通テーマ用のスタイル、特定のページ用のスタイルなど、役割ごとにファイルを分けて管理し、必要な場所で読み込むことで、コードの可読性やメンテナンス性を向上させることができます。

サンプルコードでは、@import url("styles/reset.css");という形で、url()関数を使用して外部CSSファイルのパスを指定しています。これにより、styles/reset.cssというファイルに定義されたブラウザのデフォルトスタイルをリセットするCSSが、現在のスタイルシートに読み込まれ適用されます。同様に、styles/theme.cssも読み込まれ、サイト全体の共通テーマや基本スタイルが適用されます。

この@importルールは、スタイルシート内の他のCSSルールや宣言よりも前に記述する必要がありますが、文字エンコーディングを指定する@charsetルールが存在する場合は、その後に記述されます。読み込まれた外部ファイル内のスタイルは、その後に記述された現在のスタイルシートの直接的なルールよりも先に適用されますが、CSSの優先順位の仕組みに従って、後のルールによって上書きされる場合もあります。

@importルールには引数はなく、特定の処理結果を返す戻り値もありません。あくまで指定されたCSSファイルを現在のスタイルシートに組み込むという役割を果たします。

Copy
1/*
2 * 外部のCSSファイルを現在のファイルに読み込むための @import ルールです。
3 * これにより、CSSを複数のファイルに分割し、モジュール化して管理しやすくすることができます。
4 * (これは大規模なCSSプロジェクトにおいて「重要」な構成管理の機能です。)
5 */
6
7/* 'styles/base.css' という名前の外部ファイルを読み込みます。 */
8@import url("styles/base.css");
9
10/*
11 * メディアクエリを指定して、特定の条件でのみファイルを読み込むことも可能です。
12 * 例: 画面幅が768px以上の場合にのみ 'styles/tablet-desktop.css' を読み込みます。
13 */
14@import url("styles/tablet-desktop.css") screen and (min-width: 768px);
15
16/* 
17 * 読み込まれたCSSファイル内のスタイルは、このファイルに直接記述された
18 * スタイルよりも先に評価されます（ただし、CSSの通常の詳細度と順序のルールは適用されます）。
19 * 
20 * 例えば、'styles/base.css' が以下のような内容を含んでいると仮定します:
21 * 
22 *   body {
23 *     font-family: Arial, sans-serif;
24 *     margin: 0;
25 *   }
26 * 
27 * その後、このファイルで定義されたスタイルが適用されます。
28 */
29
30body {
31  background-color: #f8f8f8; /* 全体の背景色を設定 */
32  color: #333; /* 文字色を設定 */
33}
34
35h1 {
36  color: #0056b3; /* 見出しの色を設定 */
37  text-align: center;
38  padding: 20px;
39}
40
41/*
42 * 注意: @import ルールは、@charset ルール以外のすべてのスタイルルールの前に記述する必要があります。
43 * (これはCSSの構文規則において「重要」な点であり、正しく適用するために守る必要があります。)
44 */

@importは、CSSにおいて外部のCSSファイルを現在のスタイルシートに読み込むための「アットルール」と呼ばれる特別な命令です。この機能を使用することで、大規模なCSSプロジェクトでコードを複数のファイルに分割し、モジュールとして管理しやすくすることができます。これは、保守性と再利用性を高める上で非常に重要な構成管理の手法です。

このルールは引数を直接持ちませんが、url()関数を使って読み込む外部CSSファイルのパスを指定します。特定の戻り値は存在せず、読み込まれたCSSの内容が現在のスタイルシートに統合され、適用されます。

サンプルコードでは、まず@import url("styles/base.css");と記述することで、styles/base.cssというファイルに定義された基本的なスタイルを読み込んでいます。さらに、@import url("styles/tablet-desktop.css") screen and (min-width: 768px);のように、メディアクエリを指定することで、画面幅が768ピクセル以上のデバイスでのみstyles/tablet-desktop.cssを読み込むといった条件付きのスタイル適用も可能です。

読み込まれた外部CSSファイル内のスタイルは、通常、このファイルに直接記述されたスタイルよりも先に評価されますが、CSSの詳細度や記述順序の通常のルールは適用されます。そのため、必要に応じて後から記述されたスタイルで上書きすることができます。

一つ重要な注意点として、@importルールは、@charsetルールを除き、他のすべてのCSSスタイルルールよりも必ずファイルの先頭に記述する必要があります。この規則を守らないと、正しくスタイルが適用されない場合があるため、この点は特に留意してください。