開発Tips（2025-11-15）

CSS

CSS Variables（カスタムプロパティ）を活用して、テーマの切り替えやコンポーネントのスタイリングをより柔軟に行うためのテクニックです。CSS Variablesを使用することで、スタイルの一貫性を保ちながら、動的な変更を容易に実現できます。

テーマ切り替えをCSS Variablesで実装する

CSS Variablesを使うことで、JavaScriptを使わずにCSSだけでテーマを切り替えることが可能です。ルート要素に定義された変数を変更することで、ページ全体のスタイルを簡単に更新できます。

説明: テーマごとのCSS Variablesを定義し、data-theme属性に基づいてルート要素の変数を更新します。

:root {
  --bg-color: #fff;
  --text-color: #000;
}

[data-theme="dark"] {
  --bg-color: #000;
  --text-color: #fff;
}

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

JavaScriptでテーマを切り替える例:

const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
};

document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

注意点:

• CSS VariablesはIE11をサポートしていません。必要な場合はpolyfillの使用を検討してください。
• JavaScriptでCSS Variablesを操作することも可能です。

おすすめポイント:

• スタイルの一貫性を保ちやすく、テーマの変更が容易になります。
• JavaScriptのコード量を減らし、CSSの役割を明確にできます。
• メンテナンス性が向上し、大規模なプロジェクトでもスタイル管理がしやすくなります。