今回サイトをリニューアルするにあたり、CSS変数（カスタムプロパティ）にチャレンジしました！配色を変数で管理することにしたんですが、ほんとにすごく便利です！
配色の修正が必要な場合、変数をいじるだけで他にも反映されるので保守性・メンテナンス性含め、かなり管理がしやすくコーディングも効率化できるのでぜひ導入してみてください。
Table of Contents
CSS変数（カスタムプロパティ）とは？
CSS変数は、公式には「CSS Custom Properties for Cascading Variables」と呼ばれています。変数はよく文字列や数値を入れる箱といった表現がされ、変数を宣言・定義することで文字列・数値を何度も好きな時に呼び出すことができます。
CSSに限らず、変数という考え方はプログラム全般でよく聞きますよね。
ちなみに、IE11には未対応ですが、Polyfillが用意されていますので、IE対応が必要であればPolyfillを活用しましょう。
CSS変数（カスタムプロパティ）の使い方
変数を宣言・定義する場合
- 変数の宣言・定義は:rootセレクタを使用する
- 変数の銭湯は「-」半角ハイフンを2つつける
- 変数は大文字と小文字の区別がなされるので注意
style.css
:root {
--text-color:#333333;
--primary-color:#f5f5f3;
}
上記コードでは、プライマリーカラー（ベースとなるよく使う色）とテキストカラーを宣言・定義しています。これで変数の宣言・定義は終わりです。必要に応じて、自分好きなように追加していくと良いです。
変数を呼び出す場合
:rootセレクタで宣言・定義したCSS変数は、どこでも呼び出すことができます。変数を呼び出す際は、var()関数を使用します。
style.css
body {
color:var(--text-color);
background-color:var(--primary-color);
}
上記、コードで宣言・定義したCSS変数を呼び出すことができます。
CSS変数とSassの違い
Sassでも変数を使用することはできますが、CSS変数はJavaScriptから値にアクセスできるという点が大きく異なります。この辺り僕は詳しくは理解していないのですが、Sassはコンパイルされているからという認識です。
CSS変数を具体的にどう使ってる？
配色を管理する
実際に、サイトリニューアルの時にどうやって配色を管理したかをここで説明していきます。今回のリニューアル時には、テキストの色を省くと、赤3色、黄3色、グレー2色、オレンジ2色、グラデーションを４色使用しました。
こちらの配色は、以前に書いた配色ツールで選定した配色を使っています。気になる方はこちらの記事もご覧になってください。
style.css
:root {
--red-color-primary: #dc0714;
--red-color-primary-rgb: 220, 7, 20;
--red-color-second: #640000;
--red-color-second-rgb: 100,0,0;
--red-color-tertiary: #ebe4e4;
--red-color-tertiary-rgb: 235, 228, 228;
--yellow-color-primary: #d9a941;
--yellow-color-primary-rgb: 217, 169, 65;
--yellow-color-second: #FFF239;
--yellow-color-second-rgb: 255, 242, 57;
--yellow-color-tertiary: #efe8d6;
--yellow-color-tertiary-rgb: 239, 232, 214;
--gray-color-primary: #f5f5f3;
--gray-color-primary-rgb: 245, 245, 243;
--gray-color-second: #e2e2e2;
--gray-color-second-rgb: 226, 226, 226;
--orange-color-primary:#fb9200;
--orange-color-primary-rgb:251, 146, 0;
--orange-color-second:#ffce18;
--orange-color-second-rgb:255, 206, 24;
--orange-color-tertiary:#ffaa00;
--orange-color-tertiary-rgb:255, 170, 0;
--red-gradients: linear-gradient(45deg,#dc0714,#640000);
--vivid-gradients:linear-gradient(45deg, #fff239, #ffce0d, #ffaa00, #f98500, #ef5d00, #f0481a, #ef2f2a, #ec0037, #f6004f, #fc0068, #ff0081, #ff009b);
--warm-gradients1: linear-gradient(45deg, #fff239, #ffe028, #ffce18, #ffbc08, #ffaa00, #fc9a00, #f98a00, #f57900, #f06501, #ea4f07, #e3350e, #dc0714);
--warm-gradients2: linear-gradient(45deg, #fff239, #ffe028, #ffce18, #ffbc08, #ffaa00, #fc9a00, #f98a00, #f57900, #f06501, #ea4f07,
#e3350e,#dc0714,#e3350e,#ea4f07,#f06501,#f57900,#f98a00,#fc9a00,#ffaa00,#ffbc08,#ffce18,#ffe028,#fff239);
}
なぜ、#ffffffなどの16進数カラーコードだけではなく、RGBも一緒に指定しているのかというと、CSS変数を呼び出す時にrgba指定にすることでその場で透明度を調整できるからです。
例えば、トップページの料金表をご覧ください。
ライトプラン、スタンダードプラン、サポートプランと3つのプランを用意しています。こちらのテーブルの縦軸ですが、各プランの配色を薄めて配色を指定しています。具体的には、下記のようなコードのように、background-colorのrgba指定でベースの色から透明度を調整して配色を選定しています。
style.css
.comparison-table td.lite {
background-color: rgba(var(--yellow-color-second-rgb),.2);
}
.comparison-table td.standard {
background-color: rgba(var(--orange-color-second-rgb),.2);
}
.comparison-table td.support {
background-color: rgba(var(--orange-color-tertiary-rgb),.2);
}
ちなみに、透明度で指定していることで、横軸のグレーと白の段違いの配色も視認しやすくしています。
また、グラデーションに関しても、特に今回のようにコードが複雑になってくると使用するたびにコードが煩雑になります。あらかじめグラデーションも変数によって指定することで使い回すことができ、保守性・作業効率が高まります。
z-indexを管理する
当サイトでは、CSS変数を使ってz-indexを管理しています。まずは、z-indexはできるだけコンテキスト・セクション内で完結するようには指定しつつも、下記のようにCSS変数で役割ごとのz-indexの値を決めておくようにしています。
style.css
:root {
--z-index-modal: 500;
--z-index-overlay: 400;
--z-index-spmenu: 300;
--z-index-spmenu-modal: 200;
--z-index-header: 100;
z-index-modal：モーダルのメインコンテンツを表示するレイヤー
z-index-overlay：モーダル時のオーバーレイ
z-index-spmenu：スマホメニューのボタン
z-index-spmenu-modal：スマホメニューのモーダルレイヤー
z-index-header：固定ヘッダー
として、あらかじめ変数でz-indexの数値を管理しています。
CSSのz-indexについては理解しにくい部分がありますが、「CSS）z-indexのベストプラクティスを考える」という記事で丁寧に解説されてます。今回のCSS変数でのz-indexの管理も下記記事を参考にしています。
まとめ
CSS変数について書かれてる記事は増えてきている印象ですが、具体的に活用例が書かれているサイトはあまりなかったので今回はブログ記事にしてみました。配色やz-index以外にもこういう使い方があるよ!というのがあれば教えていただければ嬉しいです。
