CSS変数を使った動的なスタイルの作り方と活用法 | CSS変数の基本から応用まで徹底解説

●CSS変数とは
●CSS変数の基本的な使い方
●CSS変数を使った動的なスタイルの作り方
●CSS変数の応用例
まとめ

●CSS変数とは

CSS変数は、CSSで定義した変数のことで、値を一度定義しておけば、変数を使用する場所でその値を簡単に参照することができます。

これにより、スタイルの調整やテーマの切り替えなど、Webデザインにおける開発効率を大幅に向上させることができます。

●CSS変数の基本的な使い方

CSS変数を使うには、次のように “–” から始まる変数名と、値を定義します。

:root {
  --main-color: #0088cc;
  --font-size: 16px;
}

ここで “:root” は、HTMLの最上位の要素で、この要素に対して定義したCSS変数は、Webページ全体で使用することができます。

また、変数名にはアルファベット、数字、ハイフンなどが使用できます。

定義したCSS変数は、var() 関数を使用して参照することができます。

p {
  color: var(--main-color);
  font-size: var(--font-size);
}

このように、CSS変数を使用することで、変数の値を一箇所で変更するだけで、Webページ全体のスタイルを一括して変更することができます。

●CSS変数を使った動的なスタイルの作り方

CSS変数を使って、動的なスタイルを作ることもできます。

たとえば、マウスオーバー時に背景色が変わるボタンを作る場合、次のようにCSS変数を使用して、ボタンの背景色を動的に変更することができます。

.btn {
  --btn-bg-color: #0088cc;
  background-color: var(--btn-bg-color);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  --btn-bg-color: #ff6600;
}

このように、ボタンの背景色を変数 “–btn-bg-color” で定義し、その値を参照して背景色を設定しています。

また、マウスオーバー時には “–btn-bg-color” の値を変更して、ボタンの背景色を変更することができます。

このように、CSS変数を使用することで、動的なスタイルの作成が簡単にできます。

●CSS変数の応用例

CSS変数は、スタイルの調整やテーマの切り替えなど、Webデザインにおける効率的な開発が可能になるだけでなく、様々な応用ができます。

ここでは、CSS変数を使用した応用例を紹介します。

1.ダークモードの切り替え

CSS変数を使用して、ダークモードの切り替えを実現することができます。

次のように、 “–main-bg-color” や “–main-text-color” などの変数を定義して、背景色やテキストの色を参照するように設定します。

:root {
  --main-bg-color: #ffffff;
  --main-text-color: #333333;
}

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

.dark-mode {
  --main-bg-color: #333333;
  --main-text-color: #ffffff;
}

このように、ダークモードを切り替えるためには、”body” 要素に “dark-mode” クラスを追加するだけで、スタイルの切り替えができます。

2.レスポンシブデザイン

CSS変数を使用して、レスポンシブデザインを実現することができます。

たとえば、画面の幅に応じてフォントサイズを変更する場合、次のようにCSS変数を使用して、画面の幅に合わせたフォントサイズを設定することができます。

:root {
  --font-size-desktop: 16px;
  --font-size-mobile: 14px;
}

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

@media screen and (max-width: 768px) {
  body {
    font-size: var(--font-size-mobile);
  }
}

このように、CSS変数を使用して、画面の幅に応じてフォントサイズを変更することで、レスポンシブデザインを実現することができます。

3.アニメーションの制御

CSS変数を使用して、アニメーションの制御を行うことができます。

たとえば、ボタンのアニメーションを定義する場合、CSS変数を使用してアニメーションの時間やイージングを設定することができます。

.btn {
  --transition-duration: 0.3s;
  --transition-easing: ease-out;
  transition: background-color var(--transition-duration) var(--transition-easing);
}

.btn:hover {
  --transition-duration: 0.5s;
  --transition-easing: ease-in;
}

このように、CSS変数を使用してアニメーションの時間やイージングを制御することで、ボタンのアニメーションを滑らかに変化させることができます。

4.テーマの切り替え

CSS変数を使用して、テーマの切り替えを実現することができます。

たとえば、ライトテーマとダークテーマを切り替える場合、次のようにCSS変数を使用して、色や背景画像などを変更することができます。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #007bff;
}

.light-theme {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #007bff;
}

.dark-theme {
  --bg-color: #333333;
  --text-color: #ffffff;
  --link-color: #e0e0e0;
}

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

a {
  color: var(--link-color);
}

このように、CSS変数を使用して、テーマの切り替えを実現することができます。