CSS変数の活用術！効率的なデザイン管理と保守性アップの秘訣

CSS変数（カスタムプロパティ）は、Web開発を効率化する強力なツールです。以下に具体的な活用例を紹介します。

1. テーマの切り替え

サイト全体のテーマカラーやデザインを簡単に変更できます。

cssコードをコピーする:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
}

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

使い方: JavaScriptでクラスを切り替えるだけで、ダークモードやカラーテーマが適用できます。

2. レスポンシブデザイン

ブレイクポイントごとに変数を変更することで、一貫性を保ちながら調整が可能です。

cssコードをコピーする:root {
  --font-size: 16px;
}

@media (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

p {
  font-size: var(--font-size);
}

メリット: 変更箇所が少なくなり、保守性が向上します。

3. 再利用可能なグラデーションやアニメーション

変数を使うことで、複雑なスタイルを簡潔に記述できます。

cssコードをコピーする:root {
  --gradient: linear-gradient(45deg, #ffcc00, #ff6666);
  --animation: 0.5s ease-in-out;
}

.button {
  background: var(--gradient);
  transition: background-color var(--animation);
}

4. JavaScriptとの連携

リアルタイムでスタイルを変更できます。

javascriptコードをコピーするdocument.documentElement.style.setProperty('--main-color', '#3498db');

実例: ボタンを押すとカラーやフォントサイズを動的に変更するインタラクティブなUIが実現できます。

5. SVGやグラフィックへの応用

CSS変数はSVGの中でも活用可能です。

cssコードをコピーする:root {
  --svg-fill: #1da1f2;
}

svg {
  fill: var(--svg-fill);
}

まとめ

CSS変数を活用すれば、テーマ切り替え、レスポンシブ対応、スタイルの効率化が簡単に。保守性と拡張性が格段に向上します！