【 React 】CSS変数を使った効率的な色管理方法: サブカテゴリの使用 と その他色管理方法

はじめに

CSS変数（カスタムプロパティ）は、色を含むデザイン要素の管理を簡素化し、コードのメンテナンス性を向上させる強力なツールです。

この記事では、特に色が多くのデザインパターンにわたる場合に、サブカテゴリを使用して色を効率的に管理する方法について解説します。

基本的なCSS変数の設定

まず、基本的な色の設定方法をおさらいします。
CSS変数を使うことで、再利用性が高まり、一貫性のあるデザインを保つことができます。

styles.css

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ffffff;
  --text-color: #333333;
}

これらの変数は、以下のように使用します。

top.css

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
}

サブカテゴリの使用

多くのデザインパターンに色が関わる場合、サブカテゴリを使用して色を整理することが非常に有効です。

例えば、ボタン、カード、ヘッダーなどのコンポーネントごとに 色変数を分けて管理 します。

styles.css

:root {
  /* 基本色 */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  
  /* ボタン色 */
  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: #2980b9;
  --button-primary-active-bg: #1f639a;

  --button-secondary-bg: var(--color-secondary);
  --button-secondary-hover-bg: #27ae60;
  --button-secondary-active-bg: #1e8449;
  
  /* テキスト色 */
  --text-primary: #333333;
  --text-secondary: #666666;
}

その他の管理方法

(1)色の変形 (色合い、明度、彩度)

CSS変数を使って色の変形（明るくする、暗くする、彩度を変える）を行います。
SassやLessのようなプリプロセッサを使うと、さらに柔軟に変形できます。

styles.css

:root {
  --primary-color: #3498db;
  --primary-color-light: #5dade2; /* 明るいバージョン */
  --primary-color-dark: #2e86c1; /* 暗いバージョン */
}

(2)関連するデザインパターンごとの命名

デザインパターンごとに色変数を定義し、それぞれのパターンに応じた名前を付けます。

styles.css

:root {
  /* カード */
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --card-shadow: rgba(0, 0, 0, 0.1);

  /* ヘッダー */
  --header-bg: #f8f9fa;
  --header-text: #333333;

  /* フッター */
  --footer-bg: #2c3e50;
  --footer-text: #ecf0f1;
}

(3)モジュール化

プロジェクトをモジュールに分割し、それぞれのモジュールで特定の色変数を定義・使用します。

_buttons.css

:root {
  --button-primary-bg: #3498db;
  --button-primary-hover-bg: #2980b9;
  --button-primary-active-bg: #1f639a;
  --button-secondary-bg: #2ecc71;
  --button-secondary-hover-bg: #27ae60;
  --button-secondary-active-bg: #1e8449;
}

_cards.css

:root {
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --card-shadow: rgba(0, 0, 0, 0.1);
}

(4)カスタムプロパティによる動的変更

JavaScriptを使用してカスタムプロパティを動的に変更することで、多様なデザインパターンに対応できます。

script.js

document.documentElement.style.setProperty('--primary-color', '#3498db');

さいごに

CSS変数を使って色を管理する際に、サブカテゴリを活用することで、コードの可読性とメンテナンス性が大幅に向上します。

コンポーネントごとに色変数を整理し、必要に応じて色を変形させることで、柔軟かつ効率的な色管理が可能になりました。