1. web design shake
  2. コーディング
  3. CSS変数（カスタムプロパティ）の基本と効率的な使い方
CSS変数（カスタムプロパティ）の基本と効率的な使い方

CSS変数（カスタムプロパティ）の基本と効率的な使い方

当サイトは広告を使用しています。

CONTENTS
  1. CSS変数（カスタムプロパティ）の基本
  2. CSS変数の使い方！カラーとサイズの管理を効率化してみよう
  3. CSS変数のより応用的な使い方
  4. まとめ
CSS変数（カスタムプロパティ）について

CSS変数（カスタムプロパティ）を使うと、繰り返し使用するプロパティの値を一か所で管理することができます。
この機能を使うことでWebデザインの効率と一貫性を大幅に向上させることができるでしょう。
本記事では、CSS変数の基本とそれがどのようにCSSのメンテナンスと拡張性を向上させるかについて、実際のコード例を用いて分かりやすく説明します。

変数とは？

変数とは、プログラミングにおいて、データを一時的に保存するための「箱」のようなものです。変数には値を割り当てることができ、この値はプログラムの実行中に変更したり、別の場所で使用したりすることが可能です。
変数を使うことで、同じ値を何度も書く代わりに、その値を一か所で管理し、必要な場所で変数名を使ってその値を呼び出すことができます。これにより、コードの書き換えが容易になり、エラーのリスクを減らし、プログラムの可読性が高まります。

どういう時に使うのにゃ？
大規模なプロジェクトでは色の管理や数値の管理が難しいよね。CSS変数を使えばプロパティの値を一か所で管理できるから管理が楽になるんだよ！

CSS変数を扱うには、CSS変数の定義と呼び出しが必要です。

まず、スタイルシート内でCSS変数をどのように定義するかを見てみましょう。たとえば、サイト全体で使用する基本色を定義する場合、次のように記述します。

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

このコードでは、:root セレクタを使用して、--main-color という変数に#f66a6dという値を定義しています。この変数は、サイト全体でアクセス可能です。

CSS変数の定義

CSS変数には、色値だけでなく、さまざまな種類の値を割り当てることができます。次のようなさまざまなデータ型をサポートしています。

  • 色値: #ff5733、rgba(255, 87, 51, 0.5)、blueなど。
  • 単位付きの数値: 50px、1.5em、1rem、10%など。
  • 単位のない数値: 0.8（透明度）や 100（z-index）など。
  • 文字列:”Helvetica Neue”, sans-serif（フォントファミリー）やloading（アニメーション名）など。
  • その他: URL、角度、時間など。

変数名は以下のルールを守って名づけましょう。

  • 変数名の前にハイフンを2つつける（–）必要があります。
  • 英数字・アンダースコア・ハイフンが使用できます。
  • 大文字と小文字は区別されます。

次に、この変数をどのように呼び出すかを見てみましょう。例えば、ボタンのスタイルにこの色を適用するには、以下のようにします。

.button-main {
    background-color: var(--main-color);
}

var()に、--main-color を入れることでクラスに値を適用しています。

CSS変数の呼び出し

以下のサンプルではCSS変数を定義し、ボタンの色として呼び出しています。

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

色の値を変更する必要がある場合、:root 内の変数の値を一回変更するだけで、サイト全体の該当する色が更新されます。

CSS変数を使用することで、スタイルの一貫性を保ちながらも、柔軟にデザインを調整することができます。例えば、テーマの色を変更したい場合、:root 内の変数値を変更するだけで、サイト全体の色のテーマを一括で更新することができます。これにより、スタイルの変更が迅速かつ効率的になり、大規模なプロジェクトにおけるスタイル管理の複雑さが大幅に減少します。

気になるブラウザ対応状況ですが、CSS変数は、現在の多くのブラウザでサポートされています。問題なくCSS変数を使用して良いと言えるでしょう。

IEではCSS変数をサポートしていません。そのため、IEをターゲットとするプロジェクトでは、CSS変数の代わりにSassのようなプリプロセッサーを使用するか、JavaScriptを利用して同様の機能を実装する必要があります。

グローバル変数とローカル変数によって、スコープを活用することで、スタイルの一貫性を保ちつつ、特定の部分に特有のスタイルを適用することができます。

スコープってなにかにゃ？
スコープとは、変数がどの範囲で利用可能か、つまり変数の「有効範囲」のことを指すよ。スコープによって、CSS変数がどのHTML要素に影響を与えるかが決まるんだよ！

グローバル変数は、ウェブサイト全体にわたってアクセス可能な変数です。
これらは通常、:root 擬似クラス内で定義されます。:root はドキュメントのルート要素（HTML文書の場合は <html> 要素）を指し、ここで定義された変数はページ全体で使用できます。

:root {
    --font-size: 16px;
}

ローカル変数は、特定の要素またはコンポーネントに限定された変数です。これらは特定のセレクタ内で定義され、そのセレクタやその子要素にのみ影響を与えます。
例えば、特定のセクションに特有の色を設定したい場合は、そのセクション内でローカル変数を定義します。
以下のように.headerと.footerでそれぞれ--font-sizeを再定義しています。これらの値は.headerと.footer自身と子要素のみで使用できます。

.header {
    --font-size: 18px;
}

.footer {
    --font-size: 14px;
}

CSS変数におけるフォールバックは、変数が何らかの理由で利用できない場合に使用される代替値のことです。
これは、変数に割り当てられた値が未定義であったり、ブラウザがCSS変数をサポートしていない場合に特に役立ちます。

CSS変数を使用する際、フォールバック値は var() 関数の第二引数として指定されます。以下はその基本的な構文です。

button {
    background-color: var(--main-color, #95cefc);
}

何らかの理由で--main-colorが利用できない場合（例えば、別のCSSファイルで :root がオーバーライドされている場合）、ボタンの背景色はフォールバック値である #95cefc になります。

引数とは？

CSS変数において「引数」とは、主に var()のカッコの中で使用される値のことを指します。
var() は1つまたは2つの「引数」を取ることができます。2つ目の引数を設定した時にそれがフォールバック値となります。

CSS変数の基本がわかったところで、実践的な使い方を見ていきましょう。
ここでは管理が難しくなりがちなカラーとサイズの管理について解説します。

CSS変数を定義し、呼び出すことでカラーパレットの管理が楽になります。
色々なコンポーネントで利用していたカラーを:root に集約させて再利用します。例えば--base-color--main-color--accent-colorなど、その色の役割ごとに変数名を付けると呼び出すときに把握しやすくて便利です。

このサンプルでは:rootにあらゆるカラーをCSS変数として定義しておき、コンポーネントごとに呼び出しています。

See the Pen CSS variable 2 by web design shake (@webdesignshake) on CodePen.

CSS変数の定義はこのように行います。

:root {
    --base-color: #fff;
    --main-color: #6450f9;
    --accent-color: #f66a6d;
    --text-black: #666;
    --text-white: #f7f7f7;
}

CSS変数を呼び出すときはこのように呼び出します。

.container {
  background: var(--base-color);
}

.container_head {
  background: var(--main-color);
  color: var(--text-white);
}

.container_text {
  color: var(--text-black);
}

.container_button {
    background-color: var(--accent-color);
}

.index {
  background: var(--base-color);
}

.index_icon {
  background-color: var(--accent-color);
}

.index_title {
  color: var(--text-white);
  background: var(--main-color);
}

.index_list li {
  color: var(--text-black);
}

.index_list li:before {
    background: var(--accent-color);
}

カラーを変えるには:rootで定義した色を変更しましょう。
たとえば:rootを以下のように変更します。

:root {
    --base-color: #fff;
    --main-color: #95cefc;
    --accent-color: #00c3c2;
    --text-black: #999;
    --text-white: #f2f2f2;
}

これだけでCSS全体のカラーが変更できました！
CSS変数ではこのように、それぞれの色を調整する必要がなく、一つの場所で配色を管理できるのが最大のメリットと言えるでしょう。

See the Pen CSS variable 3 by web design shake (@webdesignshake) on CodePen.

レスポンシブデザインにおけるサイズ調整は、Webサイトが異なる画面サイズやデバイスで適切に表示されるようにするための重要なテクニックです。
CSS変数を利用することで、これらの調整をより柔軟かつ効率的に行うことができます。以下に、レスポンシブデザインでのサイズ調整でメディアクエリとCSS変数を活用したテクニックを紹介します。

:root {
    --default-font-size: 16px;
}

@media screen and (max-width: 768px) {
    :root {
        --default-font-size: 14px;
    }
}

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

この例では、画面の幅が768px未満の場合、フォントサイズが14pxに調整されます。
CSS変数を使用することで、これらの変更を一箇所で行うだけで、サイト全体に適用することができます。これにより、レスポンシブデザインの実装が簡単かつ効率的になります。

ここまでは、CSS変数の基本的な使い方を説明してきました。
ここからはより応用的な使い方について解説します。

JavaScriptとCSS変数を連携させて動的にスタイルを変更する方法は、Webページにインタラクティブな要素を加えたり、ユーザーのアクションに基づいてスタイルを変更したりするのに非常に有効です。
CSS変数をJavascriptで制御することで、一括でプロパティの値を変更し、リアルタイムで表示に反映させることができます！
このサンプルの「–main-colorの色を変える」「–accent-colorの色を変える」ボタンを押してみてください。ボタンを押すたびにランダムなRGB値を生成し、CSS変数の値を変更しています。

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

どのようにCSS変数を変更しているか解説します。

1

CSS変数の定義と呼び出しをします。


まずは:rootにCSS変数を定義します。（説明に不要な個所は割愛します）

:root {
    --main-color: #6450f9;
    --accent-color: #f66a6d;
}

各コンポーネントからCSS変数を呼び出します。

.container_head {
  background: var(--main-color);
}
2

JavaScriptでのCSS変数の値を変更します。

JavaScriptを使用して、CSS変数の値を変更します。
ボタンをクリックしたらRGB値をランダムで生成し、それをCSS変数の値として再設定します。
これは、document.documentElement.style.setProperty() メソッドを使って行われます。
CSS変数を変更することで、色の変更がリアルタイムで反映されます。

document.getElementById('changeColorButtonMain').addEventListener('click', function() {
  var randomColor = "rgb(" + (~~(256 * Math.random())) + ", " + (~~(256 * Math.random())) + ", " + (~~(256 * Math.random())) + ")" ;
    document.documentElement.style.setProperty('--main-color', randomColor);
});

CSS変数を使用してHSL（色相、彩度、明度）形式で色を設定してみましょう。
HSL形式は、色相（Hue）、彩度（Saturation）、明度（Lightness）の3つの値で色を指定する方法です。この形式を使うと、色相を変えるだけで様々な色合いを簡単に生成できます。

RGBとはなにがちがうのにゃ？
RGBはRed、Green、Blueの原色を混ぜて色を作るのに対して、HSLは色相、彩度、明度という値で色を決めるよ。
1

CSS変数を設定します。

まず、:root 擬似クラスを使用して、色相（H）、彩度（S）、明度（L）の各部分を個別の変数として定義します。これにより、色相や彩度、明度を独立して管理し、必要に応じて調整することが可能になります。

:root {
    --hue: 210;           /* 色相 */
    --saturation: 50%;    /* 彩度 */
    --lightness: 40%;     /* 明度 */
}
2

CSS変数で複数の値を呼び出し、色を作成します。

次に、これらの変数を組み合わせて、hsl() 関数を使用し、実際の色を指定します。
hslの色相、彩度、明度に対し、それぞれ定義したCSS変数を呼び出します。
これにより、:root で定義した色相、彩度、明度の値を使用して、具体的な色を生成します。

.element {
    background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}
3

色を調整します。

CSS変数の真価は、これらの値を変更することで、サイト全体の色調を容易に調整できる点にあります。
たとえば、より暗い色合いが必要な場合は、明度（--lightness）の値を調整するだけで対応できます。同様に、異なる色合いが必要な場合は、色相（--hue）を変更します。

このように、CSS変数を活用することで、色の管理が格段に簡単になり、デザインの一貫性を保ちながら柔軟にスタイルを調整できるようになります。

今回RGBではなく、HSLにしたのは色の調整のしやすさからです。例えば同じトーンで色相を変えたいときなどは、彩度と明度はそのままで、色相だけ調整できるHSL形式が便利です。

本記事では、CSS変数（カスタムプロパティ）の基本とその使い方から応用まで解説しました。
CSS変数は、プロパティの値を一か所で管理し、スタイルの一貫性を保ちつつ、柔軟にデザインを調整する強力なツールです。変数を利用することで、同じ値を何度も書く代わりに、必要な場所で変数名を使って値を呼び出すことが可能になります。

記事では、CSS変数の定義方法、呼び出し方、スコープの定義（グローバル変数とローカル変数）、フォールバックの設定、およびメディアクエリとの組み合わせによるレスポンシブデザインへの応用について説明しました。また、JavaScriptとの連携を通じて、動的なスタイル変更の実装方法を紹介し、RGBとは異なるHSL形式を使用して色をより簡単に調整できる方法も示しました。

この記事を通じて、CSS変数を駆使することで、Webデザインの柔軟性とメンテナンス性を大きく向上させることができることが理解いただけたと思います。デザインの一貫性を保ちながら、効率的かつ効果的にスタイルを管理するための強力なツールとして、CSS変数を積極的に活用してみてください。

こちらの記事もどうぞ！

おいしく学ぶWebデザイン
新着記事 デザイナーにおすすめの本特集

CATEGORY