変数にすると良い値

CSS変数ってべんり！:D。
サイト内で繰り返し登場するプロパティ値を変数にして一箇所で管理すれば、CSSの記述量が減って見通しが良くなります。
CSS変数の使い方と、サイトを作る時に用意しておくと良いCSS変数のまとめです。

CSSの変数とは

プログラミング言語でいう「変数」とは、データに名前をつけて保持しておくことができる記憶領域のこと。CSSではプロパティ値として有効な値を、任意の名前に保持しておくことができます。
“変数”って言うとプログラミング言語みたいだけれど、実は、CSS変数の正体は「カスタムプロパティ」という、コーダーが勝手に作れるプロパティのことです。

プロパティなので、colorとかmarginとかと同じ要領で値を指定できたり、親要素で指定しておけば子要素にもその値が継承されたり、他のCSSプロパティと同じように扱えるのだけれど、そのプロパティ自体は、var()関数を介して、他のCSSプロパティの「値」として使用します。
「プログラミング言語の変数を、CSSのルールセットに落とし込んだ」みたいな感じなのです:o！

カスタムプロパティの作り方

カスタムプロパティの名前には必ず、接頭辞（プレフィックス）として「--（ハイフンふたつ）」を付ける決まりがあります。
CSSプロパティに値を指定するのと同じ要領で、--で始まるカスタムプロパティ名を:（コロン）で区切ってそのあとに、指定する値を書きます。

--themecolor: #86c0de;

ここでは、--themecolorという名前のカスタムプロパティに、#86c0deという「長閑（のどか）な空色」を指定しています。

これを「そのカスタムプロパティを使いたい要素」のルールセットの中で宣言します。
例えば、下ソースコードのように書けば、header要素の中で利用可能な--themecolorというカスタムプロパティの出来上がり。:D

header {
	--themecolor: #86c0de;
}

カスタムプロパティの使い方

カスタムプロパティを「値」として使うには、var()関数を使って下ソースコードのように書きます。

header {
	--themecolor: #86c0de;
	color: var(--themecolor);
	background: white;
}

これでheader要素内の文字色には、--themecolorに指定した値、#86c0deが適用されます。

ただし、header要素の中に作ったカスタムプロパティなので、footer要素では使えません。下ソースコードのように書いても、footer要素の背景は無色のまま…:(。

footer {
	color: white;
	background: var(--themecolor);
}

カスタムプロパティの活用

CSS変数の基本的な活用方法は、例えば「サイト内で繰り返し使われる値」とか、「覚えておくのが面倒な値」を、「短くて覚えやすい名前で用意しておく」という使い方。カスタムプロパティを“定数”として利用するって寸法です。
そのためには、カスタムプロパティを、HTMLの一番上の要素で宣言しておく必要があります。

そこでよく使われるのが:root擬似クラスを使って指定する方法※。
:rootは、その文書のroot（根っこ）となる要素を指す擬似クラスで、HTML文書なら<html>を指します。
html要素にカスタムプロパティを作っておくことで、html要素内のすべての要素でその値を使うことができるようになるというわけ;)。

下サンプルでは、:rootにカスタムプロパティを宣言して、header要素の文字色と、footer要素の背景色に適用しています。

:root {
	--themecolor: #86c0de;
}
header {
	color: var(--themecolor);
	background: white;
}
footer {
	color: white;
	background: var(--themecolor);
}

カスタムプロパティや:root擬似クラスについて、詳しくは下記ページを参照のこと。

カスタムプロパティの活用例

Webサイトで共通して使われる、特定の色やフォントは、前述のように“定数”として用意しておくにはうってつけ;D。他にも、コンテンツの両脇の空きや、CSSアニメーションのイージングなんかも、:rootのCSS変数として管理すれば、CSSの見通しが良くなること請け合いです！
以下は、色コード、フォント、コンテンツ脇の余白、イージングをカスタムプロパティにしたサンプルです;)。

色コード

Webサイトのブランドカラーや、メインカラーなどを、--themecolorみたいな名前でカスタムプロパティにしておきます。特に、linear-gradient()で使われる色コードの羅列なんかは、長ったらしくて覚えてらんないですもんね！
色コードの羅列部分だけを--themegradみたいな名前で用意しておくと、使いまわしやすいです:)。

:root {
	--themecolor: #86c0de;
	--themegrad: #dc6688, #ec8668 32%, #86c68c 68%, #ec0;
}
.title {
	color: var(--themecolor);
}
.button {
	color: white;
	background: linear-gradient(60deg, var(--themegrad));
}

フォント名

Webサイトで使われるフォントを--fontみたいな名前でカスタムプロパティにしておきます。サイトによっては、日本語フォントと英語フォントを個別に指定しておくと、機転が利けて良いかもしれません。
下サンプルでは、基本は日本語フォントのみを指定しているけれど、タイトルと本文は英語フォントを変えたい、けど引用の中の本文は日本語フォントだけにしたい、みたいなケースを想定しています。

:root {
	--font: "Geologica", "Zen Kaku Gothic New", sans-serif;
	--fontJa: "Zen Kaku Gothic New", sans-serif;
	--fontEn: "Geologica", sans-serif;
}
body {
	font: 300 1em / 1.75 var(--fontJa);
}
.l-main .title,
.l-main .paragraph {
	font-family: var(--font);
}
.l-main blockquote .paragraph {
	font-family: var(--fontJa);
}
.l-footer .copyright {
	font-family: var(--fontEn);
}

コンテンツ脇の余白

メインコンテンツの左右の余白を--sidegapみたいな名前でカスタムプロパティにしておくと、コンテンツからハミ出させたい要素に指定するネガティブマージンが明確になるので安心です。
下サンプルでは、main要素の左右に--sidegapの余白を設けつつ、タイトル背景の画像のみ--sidegap分のネガティブマージンを指定してウィンドウ幅いっぱいに広がるようにしています。

:root {
	--sidegap: clamp(24px, 48vw / 7.68, 48px);
}
.l-main {
	padding-inline: var(--sidegap);
}
.l-main .header .image {
	margin-inline: calc(var(--sidegap) * -1);
}

イージング

CSSアニメーションやモーションに使われるイージングも、Webサイト内で統一されているに越したことはありません。カスタムプロパティで定数化しておけば、ブレませんね:)！
transition/animation-timing-functionプロパティで使う値をcubic-bezier()関数ごと、わかりやすい名前でカスタムプロパティにしておきます。
下サンプルでは、ドロワーメニューやリンク下線の動きなど、サイト内のモーションを、カスタムプロパティにした、3つのイージングでやりくりしています。

:root {
	--easeIn: cubic-bezier(.3,0,.7,0);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
}
.drawer.is-anim::before,
.drawer.is-anim::after {
	animation: closeBar .4s var(--easeIn) both;
}
.drawer.is-anim.is-active::before,
.drawer.is-anim.is-active::after {
	animation: openBar .4s var(--easeOut) both;
}
.scroll .line {
    animation: attention 2s var(--easeInOut) infinite;
}
.l-nav .menu.is-anim {
	transition: transform .4s var(--easeOut);
}
.l-nav:not(.is-active) .menu.is-anim {
	transition-timing-function: var(--easeIn);
}