CSS入門：CSSカスタムプロパティって何？超かんたん解説！

ウェブサイトを作る時、色やフォントサイズなど、同じ設定を何度も書くのは面倒ですよね？そこで大活躍するのが、CSSの「カスタムプロパティ」です。これは、繰り返し使う値を「変数」のように保存しておける便利な機能です。使い方もとっても簡単！

カスタムプロパティの基本

変数を作る

まずは、よく使う色やサイズを変数として保存します。例えばこんな感じ：

:root {
  --main-color: blue;
  --sub-color: green;
}

このコードで、「–main-color」という名前で青色を、「–sub-color」という名前で緑色を保存しています。
また、カスタムプロパティは、--で始まる名前を持ち、ほとんどの場合:rootセレクタで定義されます。これにより、サイト全体でアクセス可能になります。

変数を使う

次に、保存した変数を使ってみましょう。使い方は超簡単です。

body {
  color: var(--main-color); /* 文字色をメインカラーに */
  background-color: var(--sub-color); /* 背景色をサブカラーに */
}

このように書くことで、bodyの文字色を青、背景色を緑に設定できます。
また、定義したカスタムプロパティは、var()関数を使って、サイトのどこでも使用できます。

なぜカスタムプロパティが便利なの？

• 変更がラクラク：デザインを変更する時、変数の値を1か所だけ変えれば、サイト全体でその値が使われている部分が自動で更新されます。
• コードがスッキリ：繰り返し使う値を変数にしておくことで、コードが読みやすくなります。
• デザインの統一：変数を使うことで、サイト全体のデザインを一貫させやすくなります。

まとめ

CSSカスタムプロパティは、ウェブサイト作りにおいてとっても便利なツールです。色やサイズなど、何度も使う値は変数にしておくと、後で変更する時も簡単で、コードもすっきりしますよ。ぜひ使ってみてくださいね！