1.1 CSS変数とは何か?
CSS変数（カスタムプロパティとも呼ばれる）は、CSS内で宣言される変数で、色、サイズ、フォントなどの CSS属性の値を保存するために使用されます。これにより、ウェブページのスタイルの柔軟性と保守性を向上させる効果的な機能を提供します。
CSS変数とは何か?
CSS変数は、CSSプロパティの値を保存でき、スタイルのさまざまな部分で再利用可能な変数です。 二重ハイフン（--）で定義され、どのセレクタでも設定可能ですが、通常は :rootセレクタで定義され、ドキュメント全体で利用可能にします。
例:
CSS
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
CSS変数の主な特徴:
- 再利用性: CSS変数は、一度値を定義し、CSSコードのさまざまな部分で何度でも利用できます。これにより、重複を避け、スタイルの管理を簡素化します。
- 柔軟性: CSS変数の値は、要素の状態やメディアクエリなどの条件に応じて変更できます。これにより、より適応的で動的なスタイルを作成できます。
- 継承: CSS変数は、親要素から子要素へと継承され、スタイルの管理と整理が簡単になります。
- 管理しやすさ: 変数を使用することで、変数の値の変更がこれらの変数を使用するすべての要素に自動的に反映されるため、コードの保守性が向上します。
1.2 CSS変数の使用例
JavaScriptでのCSS変数の使用例:
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
例1: 変数の定義と使用
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
HTML
<body>
<p>これは段落です。</p>
<a href="#">これはリンクです</a>
</body>
解説:
- この例では、3つの変数を定義しています:
--main-bg-color,--main-text-color,--primary-color - これらの変数は、背景色、テキストの色、リンクの色を設定するために使用されます
1.3 JavaScriptでの変数値の変更
この例では、ページのテーマを設定するために変数を使用しています。ボタンをクリックすると変数の値が変更され、 背景色とテキストの色が変わります:
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
HTML
<button id="toggle-theme">テーマを切り替える</button>
<p>これは段落です。</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION