変数
CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 1/35。
より大きく、より複雑なウェブサイトを作成するにつれて、繰り返される色、サイズ、またはフォントの管理が難しくなります。1つの値を変更するということは、多くの場所を更新することを意味します。
CSS変数を使用すると、これらの値を名前として保存（--main-colorのように）し、CSS全体で再利用することができます。変数を一度変更するだけで、すべての箇所が自動的に更新されます。
これらはコードをクリーンで一貫性のある状態に保つのに非常に役立ち、多くの開発者が最新のウェブサイトを構築するためにそれらを使用しています。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
チートシート
CSS変数を使用すると、値を名前として保存し、CSS全体で再利用できます。これにより、コードをクリーンで一貫性のある状態に保つことができます。
変数は -- プレフィックスで定義し、var() で使用します：
:root {
--main-color: blue;
}
.element {
color: var(--main-color);
}変数を一度変更するだけで、すべての箇所が自動的に更新されます。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。