CSS変数の使い方と応用法 | CSS変数一覧を超詳しく解説！サンプルコード付き

はじめに

CSS変数とは、CSSで変数を定義し、あとから変数の値を変更することができる機能です。

CSS変数を使うことで、スタイルの再利用性が向上し、保守性も高まります。

また、スタイルの一括変更も簡単にできるため、効率的なWebデザインが可能になります。

この記事では、CSS変数の使い方から応用まで、初心者でも理解できる詳しい解説を行います。

さらに、CSS変数一覧も紹介し、サンプルコードを用いた使い方や対処法も解説します。

●CSS変数の作り方

CSS変数を使うには、まず変数を定義する必要があります。

変数を定義するには、–を接頭辞としたプロパティを使用します。

例えば、次のような定義方法があります。

:root {
  --main-color: #333;
}

このように、:rootセレクタ内で–main-colorという名前の変数を定義しています。

変数名には、英数字、ハイフン、アンダースコアなどが使用できます。

また、変数の値には、色、長さ、文字列、数値など、CSSで使用される値を指定することができます。

変数を定義したら、次のように使用することができます。

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

このように、var()関数を使用して、定義した変数の値を参照することができます。

●CSS変数一覧

CSS変数を定義するときには、何度も同じプロパティを書かなくて済むため、スタイルの再利用性が向上します。

また、定義したCSS変数は、変数名と値をセットで定義するため、管理がしやすく保守性も高まります。

ここでは、よく使われるCSS変数の一覧を紹介します。

/* カラーパレット */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
}

/* フォントサイズ */
:root {
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1rem;
  --body-font-size: 1rem;
}

/* ボーダー */
:root {
  --border-width: 1px;
  --border-color: #dee2e6;
  --border-radius: 0.25rem;
}

/* ボックスシャドウ */
:root {
  --box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

このように、カラーパレットやフォントサイズ、ボーダー、ボックスシャドウなど、よく使われるスタイルのパラメータをCSS変数で定義することで、一括で変更することができます。

●CSS変数の使い方

CSS変数は、スタイルの再利用性が向上するため、非常に便利な機能です。

ここでは、CSS変数の使い方をいくつか紹介します。

1. カラーパレットの変更

カラーパレットをCSS変数で定義しておくと、一括で変更することができます。

例えば、次のように変数を定義しておくと、:rootセレクタの背景色を変更するだけで、ページ全体の色が変わります。

:root {
  --primary-color: #007bff;
}

body {
  background-color: var(--primary-color);
}

2. フォントサイズの変更

フォントサイズもCSS変数で定義しておくと、一括で変更することができます。

例えば、次のように変数を定義しておくと、:rootセレクタのフォントサイズを変更するだけで、全てのテキストのサイズが変わります。

:root {
  --body-font-size: 1rem;
}

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

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

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

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

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

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

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

3. ボーダーの変更

ボーダーもCSS変数で定義しておくと、一括で変更することができます。

例えば、次のように変数を定義しておくと、:rootセレクタのボーダーカラーを変更するだけで、全ての要素のボーダーカラーが変わります。

:root {
  --border-color: #dee2e6;
}

.box {
  border: var(--border-width) solid var(--border-color);
}

4. ボックスシャドウの変更

ボックスシャドウもCSS変数で定義しておくと、一括で変更することができます。

例えば、次のように変数を定義しておくと、:rootセレクタのボックスシャドウを変更するだけで、全ての要素のボックスシャドウが変わります。

:root {
  --box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.box {
  box-shadow: var(--box-shadow);
}

5. アニメーションの変更

CSS変数を使用すると、アニメーションの速度など、変化する値を一括で変更することができます。

例えば、次のように変数を定義しておくと、:rootセレクタのアニメーション速度を変更するだけで、全てのアニメーションの速度が変わります。

:root {
  --animation-speed: .3s;
}

.box {
  animation: move var(--animation-speed) ease-in-out infinite alternate;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

6. 条件分岐

CSS変数を使用すると、条件分岐を行うこともできます。

例えば、次のように変数を定義しておくと、:rootセレクタのテーマカラーが変わるに応じて、背景色を変更することができます。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

body {
  background-color: var(--primary-color);
}

body.dark-mode {
  background-color: var(--secondary-color);
}

このように、変数を使用することで、条件分岐を行うことができます。

7. 外部からの変数の受け取り

CSS変数を使用すると、外部から変数を受け取ることもできます。

例えば、次のように変数を定義しておくと、CSSファイルを読み込む側から、変数の値を指定することができます。

:root {
  --primary-color: var(--input-primary-color, #007bff);
}

input {
  border: 1px solid var(--primary-color);
}

このように、var()関数に第二引数を指定することで、外部からの値の受け取りを行うことができます。

8. calc()関数との組み合わせ

CSS変数を使用することで、calc()関数と組み合わせて、動的なスタイルの設定も可能になります。

例えば、次のように変数とcalc()関数を使用することで、要素の幅を画面幅に応じて自動調整することができます。

:root {
  --min-width: 300px;
  --max-width: 500px;
}

.box {
  width: calc(100vw - var(--min-width) - var(--max-width));
}

このように、CSS変数を使用することで、スタイルの再利用性が向上し、保守性も高まります。

また、変数の値を変更するだけで、スタイルの一括変更が可能になります。

● CSS変数の応用法

CSS変数は、スタイルの再利用性が向上し、保守性が高まるだけでなく、様々な応用法があります。

ここでは、いくつかの応用法を紹介します。

1. テーマの変更

CSS変数を使用すると、テーマの変更が簡単にできるようになります。

例えば、次のように変数を定義しておくと、:rootセレクタのテーマカラーを変更するだけで、テーマを切り替えることができます。

:root {
  --primary-color: #007bff;
}

body {
  background-color: var(--primary-color);
}

body.dark-mode {
  --primary-color: #6c757d;
}

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

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

例えば、次のように変数を定義しておくと、画面幅に応じて、フォントサイズを自動調整することができます。

:root {
  --min-font-size: 16px;
  --max-font-size: 24px;
}

body {
  font-size: calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 320px) / (768 - 320)));
}

このように、CSS変数を使用することで、幅に応じてフォントサイズを自動調整することができます。

3. 多言語対応

CSS変数を使用することで、多言語対応を行うことができます。

例えば、次のように変数を定義しておくと、:rootセレクタの言語コードに応じて、文字の配置を変更することができます。

:root {
  --dir-ltr: left;
  --dir-rtl: right;
}

body[dir="ltr"] {
  direction: var(--dir-ltr);
}

body[dir="rtl"] {
  direction: var(--dir-rtl);
}

このように、CSS変数を使用することで、多言語対応を簡単に実現することができます。

● CSS変数の対処法

CSS変数を使用する際には、いくつかの注意点があります。

ここでは、CSS変数の対処法を紹介します。

1. ブラウザの対応

CSS変数は、IE11やAndroid4.4など、一部の古いブラウザには対応していません。

そのため、使用する際には、適切なフォールバックを用意する必要があります。

例えば、次のように、変数を使用する前に、変数が定義されていない場合は、代替値を使用するようにすることができます。

:root {
  --primary-color: #007bff;
}

.box {
  background-color: var(--primary-color, #428bca);
}

2. JavaScriptとの連携

CSS変数は、JavaScriptとの連携も可能です。

例えば、次のように、JavaScriptで変数の値を変更することができます。

document.documentElement.style.setProperty('--primary-color', '#6c757d');

ただし、JavaScriptでCSS変数を変更する場合、セキュリティ上の問題が発生する可能性があるため、注意が必要です。

まとめ

以上が、CSS変数の使い方や応用法、対処法についての解説です。

CSS変数を使うことで、スタイルの再利用性や保守性が向上し、効率的なスタイル管理が可能になります。

また、応用法を駆使することで、様々なニーズに対応することができます。

しかし、古いブラウザに対応しなければならない場合や、JavaScriptとの連携に関するセキュリティ上の問題など、注意点もあります。

正しく使いこなして、より効率的なWebデザインを実現してください。