カスタムプロパティ（CSS変数）について

HTML・CSS

2025.02.14

CSSカスタムプロパティは、CSSで使う値を変数のように定義し、それを複数の場所で使い回すことができる仕組みです。これにより、色やフォントサイズ、レイアウトに使う値を一元管理でき、コードの重複を避けることができます。

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

上記の例では、--primary-color と --font-size というカスタムプロパティを定義し、body タグでその変数を使用しています。var(--primary-color) や var(--font-size) として参照することで、コード全体のメンテナンスが簡単になります。

まとめ

cssでも変数を用意してデザインの変更を簡単にできるようになるのです。

読んでくれてありがとう！！

money_monkey