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

CSS変数を使った動的なスタイルの作り方と活用法CSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●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変数を使用して、テーマの切り替えを実現することができます。

まとめ

CSS変数を使用することで、Webデザインにおける開発効率を大幅に向上させることができます。

CSS変数を使用する基本的な使い方から、動的なスタイルの作り方、応用例までを紹介しました。

ぜひ、CSS変数を使用して、効率的なWebデザインを実現してみてください。