CSS変数(カスタムプロパティ)

このレッスンでは、CSS変数(カスタムプロパティ)の使い方を学び、デザインをまとめて管理できるようになることを目標にします。「CSS変数 使い方」「CSS カスタムプロパティ」で調べている方向けです。

--変数名: 値;で色やサイズを「CSS変数」として登録し、var(--変数名)で使い回せます。デザインをまとめて変更したいときにとても便利で、テーマカラーを1箇所直すだけでサイト全体の色を統一できます。:rootセレクタに定義するとページ全体で使える変数になります。

サンプルコードでは、:rootの中に--main-colorと--spacingという2つのCSS変数を定義し、.boxのスタイルの中でvar(--main-color)のように呼び出しています。--main-colorの値を1箇所変更するだけで、それを使っているすべての要素の色が一斉に変わる様子を想像してみましょう。

初心者がよくつまずくのが、変数名の先頭に必ず--(ハイフン2つ)を付ける必要がある点です。これを忘れると通常のプロパティと区別がつかず、正しく動作しません。呼び出す側のvar()も書き忘れやすいポイントなので、セットで覚えておきましょう。

プログラミング言語の「変数」と同じ考え方をCSSに取り入れたもので、規模の大きいサイトほど保守性が大きく向上する仕組みです。ダークモード対応など、テーマを切り替える機能を実装する際にも、この考え方が土台になります。