2.1 CSS変数の宣言
CSS変数、またはカスタムプロパティ（Custom Properties）は、CSSコードのさまざまな部分で再利用できる値を定義するのに役立つよ。これにより、スタイルの管理が大幅に簡素化され、柔軟性が向上するんだ。
CSS変数はダブルハイフン（--）を使って宣言されるんだけど、どのセレクタでも設定できるよ。でも、ドキュメント全体で変数のアクセスを確保するために、よくルートセレクタ:rootで定義されるんだ。
構文:
セレクタ {
--変数名: 値;
}
例:
この例では、四つの変数が宣言されてるよ：--main-bg-color、--main-text-color、--primary-color、そして--font-sizeだね。
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
CSS変数の使用
変数の値を使うためには、関数var()を使うんだ。この関数は変数名を引数として受け取るよ。
構文:
セレクタ {
プロパティ: var(--変数名);
}
例:
この例では、変数の値が背景色、テキストの色、フォントサイズ、リンクの色を設定するために使われているよ。
CSS
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 CSS変数の使用例
例1: 基本的な変数の使用
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
HTML
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
結果:
- ページの背景がライトグレーになる
- テキストはダークグレーになる
- フォントサイズは16ピクセルになる
- リンクは青色になる
例2: 個別コンポーネントでの変数の再定義
CSS変数は、個別の要素やコンポーネントで再定義できて、スタイリングの柔軟性を提供してくれるよ：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* 変数の再定義 */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
HTML
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
結果:
- ヘッダーの背景は青色になり、テキストはライトグレーになる
- フッターの背景は赤色（再定義された変数）になり、テキストはライトグレーになる
例3: 他の値と組み合わせた変数の使用
CSS変数は他の値やCSSの関数と組み合わせることもできるよ:
CSS
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
HTML
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
結果:
- コンテナには変数で設定されたパディングとマージンがある
2.3 JavaScriptでのCSS変数の使用
JavaScriptでのCSS変数の使用例
CSS変数はJavaScriptを使って動的に変更でき、リアルタイムでスタイルを調整できるよ:
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
HTML
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
説明:
ボタンが押されると、変数--bg-colorと--text-colorの値が変更され、その結果ページの背景色とテキストカラーが変わるんだ。
GO TO FULL VERSION