はじめに
ウェブサイトで複数のフォントウェイトが指定されている場合、「Mediumは500？SemiBoldは600だっけ？？」と数値を忘れてしまうことがありませんか？そんな時、Google Fontsのページを毎回確認する手間がありましたが、CSS変数がこの問題を解決してくれました！CSS変数を活用すると、フォントウェイトだけでなく、カラーコードなど繰り返し使用するプロパティ値の管理も簡単になります。
css変数とは
カスタムプロパティ（CSS 変数やカスケード変数と呼ばれることもあります）は、CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。カスタムプロパティ記法（たとえば、
--main-color: black;）で設定し、var()関数（たとえば、color: var(--main-color);）でアクセスします。
（引用元）CSS カスタムプロパティ（変数）の使用 – CSS: カスケーディングスタイルシート | MDN
css変数の基本的な使い方
「変数を定義し、使いたい場所で呼び出す」と、シンプルです！
1.変数を定義
:root内に、「–」（ハイフン2つ）の後に、変数名を下記、:（コロン）で区切って、値を書きます。
:root {
--primary-color: blue;
}
2.変数の使用（呼び出し）
使いたいところに、var()関数を使用して変数名を指定します。
h1 {
color: var(--primary-color);
}
CSS変数の活用法
CSS変数を活用する上で、変数名を役割や目的に基づいた明確な命名をすることが重要です。これを準備しておけば捗るよ、というものをご紹介します！
Font系
:root {
--primary-font-set: 'Noto Serif JP', serif;
--sans-font-set: 'Noto Sans JP', sans-serif;
--en-font-set: 'Barlow Condensed', sans-serif;
--font-weight-Regular: 400;
--font-weight-Medium: 500;
--font-weight-SemiBold: 600;
--font-weight-Bold: 700;
--font-weight-Black: 900;
}
フォントウェイトの数値に迷っても……このように補完されるので安心！
Color系
:root {
--primary-text-color: #000;
--main-color: #00CCFF;
--main-color-rgb: 0,204,255;
--secondary-color: #FF9900;
--secondary-color-rgb: 255,153,0;
--bg-color-gray: #F9F9F9;
--bg-color-orange: #FAF2E7;
--link-color: #1FBEE5;
--line-color: #9D9D9D;
}
メインに使用するカラーと透過させることができるように、rgb値を準備しておくと良いです。
まとめ
スタイルの一貫性を保て、効率的にコーディングできるのでコーディングのスピードも向上しました。calc()関数やclump()関数にも活用できるようになったら追記したいと思います。
