【CSS】変数（カスタムプロパティ）の使い方

CSSはウェブデザインにおいて不可欠な言語であり、最新の機能や手法を活用することで効率的でメンテナンスしやすいスタイルシートを構築できます。その中でも今回は、CSS変数（カスタムプロパティ）に焦点を当て、どのように使用するかを探ってみましょう。

CSS変数とは？

CSS変数は、再利用可能な値を格納するための仕組みで、スタイルシート内で簡単に変更できるグローバルな変数です。これにより、一貫性のあるデザインを保ちながら、柔軟性を持たせることができます。

変数の宣言

まず始めに、変数を宣言する必要があります。通常、これは:rootセレクタ内で行います。以下は例です。

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

変数の使用

宣言された変数はvar()関数を使用してプロパティに適用します。これにより、変数が参照されたプロパティには事前に定義された値が適用されます。

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

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 10px;
}

.footer {
  background-color: var(--secondary-color);
  color: black;
  padding: 10px;
}

変数の更新

変数は動的であり、後から変更することができます。これにより、例えばテーマの変更などが容易になります。

:root {
  --primary-color: #ff5733;
}

まとめ

CSS変数を使用することで、共通のスタイルを効果的に管理し、保守性を向上させることができます。これは特に大規模なプロジェクトやテーマ変更が頻繁な場合に威力を発揮します。