【CSS Modules】base-paletteアットルール記述子の使い方

Copy
1/*
2 * システムのベースとなるカラーパレットを定義します。
3 * これらのCSSカスタムプロパティ（CSS変数）は、ウェブサイト全体で一貫した色使いを保証し、
4 * 色の変更が必要になった際に一箇所で管理できるようにします。
5 */
6:root {
7  /* 主要なUI要素やブランドカラーに使う色 */
8  --color-primary: #007bff;
9  /* 補助的なUI要素やニュートラルな要素に使う色 */
10  --color-secondary: #6c757d;
11  /* 成功や肯定的なフィードバックを示す色 */
12  --color-success: #28a745;
13  /* 危険やエラーを示す色 */
14  --color-danger: #dc3545;
15  /* 警告や注意を示す色 */
16  --color-warning: #ffc107;
17  /* 情報提供や中立的な情報を示す色 */
18  --color-info: #17a2b8;
19
20  /* 明るい背景色やテキスト色 */
21  --color-light: #f8f9fa;
22  /* 暗い背景色やテキスト色 */
23  --color-dark: #343a40;
24
25  /* 本文テキストのデフォルト色 */
26  --color-text-body: #212529;
27  /* 明るい背景上のテキスト色（例: ダークカラーボタン上のテキスト） */
28  --color-text-on-dark: #ffffff;
29}
30
31/*
32 * 定義されたベースパレットを実際に使用する例。
33 * これにより、サイト全体のデザインの一貫性を保ちつつ、
34 * 容易にテーマカラーを変更できるようになります。
35 */
36body {
37  /* ボディの背景色とテキスト色をベースパレットから設定 */
38  background-color: var(--color-light);
39  color: var(--color-text-body);
40  font-family: sans-serif;
41  margin: 0;
42  padding: 20px;
43}
44
45.button-primary {
46  /* 主要ボタンの背景色とテキスト色を設定 */
47  background-color: var(--color-primary);
48  color: var(--color-text-on-dark);
49  padding: 10px 20px;
50  border: none;
51  border-radius: 5px;
52  cursor: pointer;
53  font-size: 16px;
54}
55
56.alert-danger {
57  /* エラーメッセージ用の背景色とテキスト色を設定 */
58  background-color: var(--color-danger);
59  color: var(--color-text-on-dark);
60  padding: 15px;
61  border-radius: 5px;
62  margin-top: 10px;
63}

このサンプルコードは、ウェブサイトのデザイン全体で利用する基本的な色（カラーパレット）を定義し、管理する方法を示しています。これは、リファレンス情報にある「base-palette」という概念を、CSSの標準機能であるカスタムプロパティ（CSS変数）を使って実現したものです。特定のCSS at-ruleや関数ではないため、引数や戻り値は存在しません。

コードの冒頭では、:rootセレクタ内に様々な色のカスタムプロパティを定義しています。例えば、--color-primaryは主要な要素に使う色、--color-successは成功を示す色といった具合に、意味のある名前を付けて色コード（例: #007bff）を割り当てています。これにより、サイト全体で同じ色が異なる場所で使われる際に、毎回色コードを記述する手間を省き、デザインの一貫性を保ちやすくなります。また、将来的にブランドカラーを変更する際も、この:rootブロック内の一箇所を修正するだけで、サイト全体の色を更新できるため、メンテナンス性が大幅に向上します。

コードの後半では、定義したカラーパレットを実際にHTML要素に適用する例を示しています。bodyの背景色やテキスト色、.button-primaryクラスを持つボタン、.alert-dangerクラスを持つ警告メッセージなどに、var(--カスタムプロパティ名)という形式で色を適用しています。このvar()関数を使うことで、先ほど定義したカスタムプロパティの値を参照し、簡単に利用できます。このように、カラーパレットを一元的に定義し、それを再利用することで、システムエンジニアがWebアプリケーションのUIを開発する際に、デザインの統一性を保ちつつ、効率的にスタイルを管理できるようになります。