10.1 変数の宣言
CSSの変数、またはCustom Propertiesとも呼ばれるもので、開発者が プロパティの値を一箇所に保存し、ドキュメントで再利用することができるんだ。これにより、CSSは特に大規模なプロジェクトで より柔軟で管理しやすくなる。
変数の宣言
CSSで変数を宣言するには、変数の名前の前に二つのダッシュ (--)を使うんだ。 通常、これらはセレクタ:rootの中で宣言され、ドキュメント全体で使えるようにするんだよね。
シンタックス:
:root {
--変数名: 値;
--変数名: 値;
}
例:
この例では、三つの変数--main-color, --secondary-color, と--font-sizeが宣言されている。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 変数の使用
変数を使うには、関数var()を使い、変数の名前を引数として渡すんだ。
シンタックス:
セレクタ {
プロパティ: var(--変数名);
プロパティ: var(--変数名);
}
例:
この例では、以前に宣言された変数を使って<body>の背景、テキストの色、フォントサイズをスタイリングしている。
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 変数の継承と再定義
CSSの変数は要素の階層に沿って継承されるんだよ。つまり、一つの要素で宣言された変数は、 その子要素でも利用できるようになる。また、異なるセレクタの中で再定義することも可能なんだ。
例:
この例では、.header要素が変数--main-colorを再定義し、その新しい変数はその要素だけに適用される。 一方、.footer要素は:rootで宣言された変数の値を使用するんだ。
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 CSS変数の利点
1. スタイル管理の簡略化:
変数を使うことで、一つのプロパティの値を一箇所で変更するだけで、その変数が使われているすべての場所に自動的に変更が適用されるんだ。 これはテーマの適用や一貫したスタイルの維持に特に役立つ。
2. コードの可読性と保守性の向上:
変数を使うと、CSSコードがもっと読みやすく、理解しやすくなるんだ。変数は、色やサイズなどの意味がある値を記述するために使用できる (例えば、--main-colorの代わりに#3498dbを使う)。
3. スタイルの動的更新:
変数はJavaScriptを使って動的に変更することができるので、よりインタラクティブでダイナミックなユーザーインターフェースを作ることができるんだ。
GO TO FULL VERSION