CSSカスタムプロパティの便利な使い方！管理しやすくなるテクニックを徹底解説

2月 20, 2025 2月 20, 2025

こた

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

CSSのカスタムプロパティ（変数）を活用すると、スタイルの管理がぐっと楽になります。

例えば、ブランドカラーやフォントサイズを一元管理できるため、保守性が向上し、変更にも柔軟に対応できます。

本記事では、CSSカスタムプロパティの基本から、実践で役立つ便利な機能まで詳しく解説します！

CSSカスタムプロパティとは？

CSSカスタムプロパティとは、CSS内で変数のように値を定義し、繰り返し利用できる機能です。
変数を一箇所で管理することで、デザインの一貫性を保ちつつ、コードの修正を簡単に行うことができます。

基本的な記述方法

css

:root {
  --main-color: #3498db;
  --text-color: #333;
}

このように :root 内で -- から始まる変数を定義し、var(--変数名) で利用します。

css

h1 {
  color: var(--main-color);
}
p {
  color: var(--text-color);
}

これで、サイト全体の配色を一括管理できるようになります。

カスタムプロパティを使うメリット

1. 保守性の向上

例えば、サイトのメインカラーを変更する場合、カスタムプロパティを使っていれば --main-color を変更するだけで済みます。

css

:root {
  --main-color: #e74c3c; /* 赤系に変更 */
}

これにより、複数のスタイルを個別に修正する手間が省けます。

2. ダークモードやテーマ変更が簡単

カスタムプロパティを利用すれば、簡単にダークモードを実装できます。

css

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
}

css

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

ダークモードを有効にするには、body に .dark-mode クラスを追加するだけです。

3. JavaScriptと連携して動的に変更可能

カスタムプロパティは JavaScript で変更できます。

JavaScript

document.documentElement.style.setProperty('--main-color', '#ffcc00');

これにより、ユーザーの操作に応じてスタイルを動的に変更できます。

よく使うCSSカスタムプロパティの活用例

1. ボタンのスタイルを統一

css

:root {
  --btn-bg: #007bff;
  --btn-text: #fff;
  --btn-padding: 10px 20px;
}

button {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  padding: var(--btn-padding);
  border: none;
  border-radius: 5px;
}

これでボタンのデザインを統一できます。

2. アニメーションの時間を変数で管理

css

:root {
  --animation-duration: 0.5s;
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--animation-duration) ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

アニメーションの時間を一括で変更できます。