CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

Post on:2020年10月28日

はじめに

CSSの変数（別名: カスタムプロパティ）がブラウザでサポートされるようになって4年が経ちました。プロジェクトや状況に応じて、使用されていると思います。CSSの変数は非常に便利で使いやすいのですが、フロントエンドのデベロッパーが間違った使い方をしたり、誤解していることがあります。

この記事では、CSSの変数についてすべての情報を得ることができるドキュメントがあればと思い、文章化しました。数多くの使用例を用いて、CSSの変数について知っておくべきことを学ぶことができます。

準備はいいですか？
それでは、始めましょう！

CSSの変数（カスタムプロパティ）とは

CSSの変数とは、CSSの値の再利用性と冗長性の削減を目的として、CSSドキュメント内で定義される値のことです。
CSSの変数の基本的な使用例を見てましょう。

セクションの実装

セクションのボーダー、タイトル、疑似要素はすべて同じカラーです。

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #235ad1;
}

.section {

border: 2px solid #235ad1;

}

.section-title {

color: #235ad1;

}

.section-title::before {

content: "";

display: inline-block;

width: 20px;

height: 20px;

background-color: #235ad1;

}

このスタイルシートでは、#235ad1という同じ値が3回使用されています。
大規模なプロジェクトで複数のCSSファイルを使用し、カラーを変更するように指示されたと想像してみてください。

簡単に思い浮かぶのは、古き良き時代の「検索と置換」です。

CSSの変数を使用すると、これはさらに簡単になります。
まず、変数名にダブルハイフン（--）をつけ、とりあえず:rootまたは<html>要素で変数を定義します。変数を値に使用する時には、var()に変数名を定義します。

:root {
  --color-primary: #235ad1;
}

.section {
  border: 2px solid var(--color-primary);
}

.section-title {
  color: var(--color-primary);
}

.section-title::before {
  /* Other styles */
  background-color: var(--color-primary);
}

:root {

--color-primary: #235ad1;

}

.section {

border: 2px solid var(--color-primary);

}

.section-title {

color: var(--color-primary);

}

.section-title::before {

/* Other styles */

background-color: var(--color-primary);

}

前述のスタイルシートより、すっきりしましたね。
変数--color-primaryは:root要素で定義したので、グローバル変数です。すべての値でこのCSSの変数を使用できます。また、変数のスコープを設定し、特定の要素にだけ変数を適用することもできます。

変数名の付け方

プログラミング言語での変数の命名と同様に、CSSの変数の命名もそれほど違いはありません。CSSの変数名には、前にダブルハイフン（--）をつけ、英数字・アンダースコア・ハイフンを使用できます。また、大文字と小文字は区別されることに注意してください。

/* 有効な変数名 */
:root {
	--primary-color: #222;
	--_primary-color: #222;
	--12-primary-color: #222;
	--primay-color-12: #222;
}

/* 無効な変数名 */
:root {
	--primary color: #222; /* 変数名にスペースは使用できません */
	--primary$%#%$#
}

/* 有効な変数名 */

:root {

--primary-color: #222;

--_primary-color: #222;

--12-primary-color: #222;

--primay-color-12: #222;

}

/* 無効な変数名 */

:root {

--primary color: #222; /* 変数名にスペースは使用できません */

--primary$%#%$#

}

CSSの変数のスコープ

CSSの変数で便利な点は、スコープを設定できることです。このコンセプトは他のプログラミング言語と似ています。
例えば、JavaScriptを例に見てましょう。

let element = "cool";

function cool() {
  let otherElement = "Not cool";
  console.log(element);
}

let element = "cool";

function cool() {

let otherElement = "Not cool";

console.log(element);

}

変数elementのスコープはグローバルなので、cool()関数内でアクセスできます。しかし、変数otherElementはcool()関数内でしかアクセスできません。

このコンセプトをCSSの変数に当てはめてみましょう。

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

:root {

--primary-color: #235ad1;

}

.section-title {

--primary-color: d12374;

color: var(--primary-color);

}

変数--primary-colorは:root要素で定義されているのでグローバルで、ドキュメント内のすべての要素でアクセスできます。さらに.section-titleの宣言ブロックのスコープ内で再定義することで、その新しい値は.section-title内でのみ機能します。

スコープのコンセプトを図にしてみました。

CSSの変数のスコープのコンセプト

セクションのタイトルのカラーに使用される--primary-colorが定義されています。Featured authorsとLatest articlesのカラーを変更したいので、--primary-colorの値を上書きしています。変数--unitにも同じことが当てはまります。
上記の図のCSSは、下記の通りです。

/* グローバル変数 */
:root {
  --primary-color: #235ad1;
  --unit: 1rem;
}

/* セクションのタイトルのデフォルトのカラーとスペース */
.section-title {
  color: var(--primary-color);
  margin-bottom: var(--unit);
}

/* タイトルのカラーの上書き */
.featured-authors .section-title {
  --primary-color: #d16823;
}

/* カラーとスペースの上書き */
.latest-articles .section-title {
  --primary-color: #d12374;
  --unit: 2rem;
}

/* グローバル変数 */

:root {

--primary-color: #235ad1;

--unit: 1rem;

}

/* セクションのタイトルのデフォルトのカラーとスペース */

.section-title {

color: var(--primary-color);

margin-bottom: var(--unit);

}

/* タイトルのカラーの上書き */

.featured-authors .section-title {

--primary-color: #d16823;

}

/* カラーとスペースの上書き */

.latest-articles .section-title {

--primary-color: #d12374;

--unit: 2rem;

}

CSSの変数のフォールバック

サポートされていないブラウザにフォールバックを提供するという意味ではありません。ここでのフォールバックは、CSSの変数で使用できる機能です。
下記の例をご覧ください。

.section-title {
  color: var(--primary-color, #222);
}

.section-title {

color: var(--primary-color, #222);

}

var()内に2つの値が定義されていることに注目してください。2番目の#222は何らかの理由で変数--primary-colorが定義されていない場合のみ機能します。
さらに、var()はネストすることもできます。

.section-title {
  color: var(--primary-color, var(--black, #222));
}

.section-title {

color: var(--primary-color, var(--black, #222));

}

この機能は、変数の値が特定のアクションに依存している場合に便利です。変数が値を持っていない場合、変数のフォールバックを用意しておくことが重要です。

CSSの変数の効果的な使用例

コンポーネントのサイズ制御をCSSの変数で定義する

デザインシステムでは、ボタンに複数のサイズがあるのが一般的です。通常はボタンに3つのサイズ（small, normal, large）があります。
これらのサイズをCSSの変数で実装すると、非常に簡単です。

ボタンのサイズをCSSの変数で定義

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

.button {

--unit: 1rem;

padding: var(--unit);

}

.button--small {

--unit: 0.5rem;

}

.button--large {

--unit: 1.5rem;

}

ボタンコンポーネントのスコープ内で変数--unitを変更することで、ボタンのさまざまなバリエーションを作成できます。

HSLカラーをCSSの変数で定義する

HSLとは、色相、彩度、明度の略です。色相の値によってカラーが決まり、彩度と明度の値によってカラーの濃さや明るさを調整します。

HSLカラーをCSSの変数で定義

:root {
  --primary-h: 221;
  --primary-s: 71;
  --primary-b: 48;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
  transition: background 0.3s ease-out;
}

/* 背景を暗くする */
.button:hover {
  --primary-b: 33;
}

:root {

--primary-h: 221;

--primary-s: 71;

--primary-b: 48;

}

.button {

background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));

transition: background 0.3s ease-out;

}

/* 背景を暗くする */

.button:hover {

--primary-b: 33;

}

変数--primary-bの値を減らして、ボタンを暗くしていることに注目してください。

CSSのカラーについてもっと知りたい場合は、CSSに関する詳細な記事をご覧ください。

CSSの変数で比例を維持したままサイズ変更

Photoshop、Sketch、Figma、Adobe XDなどのデザインプログラムを使用したことがある場合は、Shiftキーを押しながら要素のサイズを変更して、要素が歪まないようにすることをお勧めします。

CSSで同じ事を直接行う方法はありませんが、CSSの変数を使用した簡単な回避策があります。

CSSの変数で比例を維持したままサイズ変更

アイコンがあり、その幅と高さが同じにしなければならないとします。変数--sizeを定義して、幅と高さの両方に使用します。

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

.icon {

--size: 22px;

width: var(--size);

height: var(--size);

}

これで完成です！
変数--sizeの値を変更するだけで、Shiftキーのリサイズを真似ることができます。この仕組みについては、こちらの記事をご覧ください。

CSS GridをCSSの変数で定義する

CSSの変数は、CSS Gridにも非常に便利です。グリッドコンテナに、定義された優先幅に基づいて子アイテムを表示させたい場合を想像してみてください。各バリエーションごとにクラスを作成してCSSを複製するよりも、変数を使用した方がはるかに簡単です。

CSS GridをCSSの変数で定義

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;
}

.wrapper {

--item-width: 300px;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));

grid-gap: 1rem;

}

.wrapper-2 {

--item-width: 500px;

}

たったこれだけのCSSで、柔軟性があり、メンテナンスが容易で、他のプロジェクトでも使用できるフルグリッドシステムを作成できます。
同じコンセプトをgrid-gapプロパティにも適用できます。

.wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

.wrapper {

--item-width: 300px;

--gap: 0;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));

}

.wrapper.gap-1 {

--gap: 16px;

}

CSS GridのgapをCSSの変数で定義

グラデーションをCSSの変数で定義

システム全体で使用されているグラデーションや背景がある場合、それを完全な値としてCSSの変数に定義することをお勧めします。

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

:root {

--primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);

}

.element {

background-image: var(--primary-gradient);

}

あるいは、単一の値を格納することもできます。例えば、グラデーションの角度を例に挙げてみましょう。

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

.element {

--angle: 150deg;

background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);

}

.element.inverted {

--angle: -150deg;

}

グラデーションの角度をCSSの変数で定義

背景のポジションをCSSの変数で定義

CSSの変数内に複数の値を含めることもできます。
これは特定のコンテキストに基づいて異なるポジションに配置する必要がある要素がある場合に便利です。

背景のポジションをCSSの変数で定義

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

.table {

--size: 50px;

--pos: left center;

background: #ccc linear-gradient(#000, #000) no-repeat;

background-size: var(--size) var(--size);

background-position: var(--pos);

}

ダークモードとライトモードの切り替えをCSSの変数で定義

ダークモードとライトモードは、今まで以上にWebサイトに要求されるようになりました。CSSの変数を使用することで、それら2つのバージョンを保存し、ユーザーやシステムの設定に応じて切り替えることができます。

ダークモードとライトモードの切り替えをCSSの変数で定義

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* <html>要素に追加されたクラス */
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

:root {

--text-color: #434343;

--border-color: #d2d2d2;

--main-bg-color: #fff;

--action-bg-color: #f9f7f7;

}

/* <html>要素に追加されたクラス */

.dark-mode {

--text-color: #e9e9e9;

--border-color: #434343;

--main-bg-color: #434343;

--action-bg-color: #363636;

}

ダークモードとライトモードの切り替え

デフォルト値をCSSの変数で定義

場合によっては、JavaScriptでCSSの変数を設定する必要があります。例えば、拡張可能なコンポーネントのheightを取得する必要があるとしましょう。
このテクニックはMichael Scharnaglの記事から学びました。

変数--details-height-openは空で、特定のHTML要素に追加されます。これにはピクセル値が含まれます。JavaScriptが何らかの理由で失敗した場合、適切なデフォルト値またはフォールバック値を提供することが重要です。

.section.is-active {
  max-height: var(--details-height-open, auto);
}

.section.is-active {

max-height: var(--details-height-open, auto);

}

値autoは、JavaScriptが失敗し、CSSの変数--details-height-openが定義されていない場合のフォールバック値です。

ラッパーの幅をCSSの変数で定義

Webページのラッパーには複数のバリエーションがあります。あるページでは小さなラッパーが、別のページでは大きなラッパーが必要になるかもしれません。そのような場合、CSSの変数で実装すると簡単です。

ラッパーの幅をCSSの変数で定義

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

.wrapper {

--size: 1140px;

max-width: var(--size);

}

.wrapper--small {

--size: 800px;

}

インラインでCSSの変数を定義

CSSの変数をインラインスタイルで使用すると、気づいていない多くの新しい可能性が開かれます。以前、記事を書いたので、その中から興味深い使用例をいくつか紹介します。

これは本番のWebサイトにとって完璧なアプローチではないかもしれませんが、さまざまなアイデアのプロトタイプやテストには役立ちます。

ダイナミックなグリッドのアイテム

style属性に変数--item-widthを加えます。このアプローチは、例えば、グリッドのプロトタイプに役立ちます。

<div class="wrapper" style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));

grid-gap: 1rem;

}

デモページ

ユーザーのアバター

もう1つ便利な使用例は、要素のサイズ調整です。アバター画像を4つの異なるサイズにして、そのサイズを1つの変数で制御できます。

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

.c-avatar {

display: inline-block;

width: calc(var(--size, 1) * 30px);

height: calc(var(--size, 1) * 30px);

}

上記のCSSを分析してみましょう。

まず、var(--size, 1)があり、値がstyle属性で追加されなかった場合に備えてフォールバック値を加えておきます。
アバターの最小サイズは30px * 30pxです。

メディアクエリでCSSの変数を定義

CSSの変数とメディアクエリを組み合わせることで、Webサイト全体で使用される変数を微調整するのに役立ちます。私が考える最も簡単な例は、変数でスペースの値を変更することです。

:root {
  --gutter: 8px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 16px;
  }
}

:root {

--gutter: 8px;

}

@media (min-width: 800px) {

:root {

--gutter: 16px;

}

変数--gutterを使用する要素は、ビューポートのサイズに応じてスペースを変更します。
これってすごいことだと思いませんか？

CSSの変数の継承

CSSの変数は、継承されます。親要素に変数が定義されている場合、子孫要素は同じ変数を継承します。下記の例をご覧ください。

<div class="parent">
  <p class="child"></p>
</div>

</div>

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

.parent {

--size: 20px;

}

.child {

font-size: var(--size);

}

.child要素は、親から継承した結果として、変数--sizeにアクセスできます。どうすればこの恩恵を受けることができるのか疑問に思うかもしれません。では、その実際の例を見てみましょう。

親から変数を継承する

次の要件を持つアイテムのグループがあります。

1つの変数を変更するだけですべてのアイテムのサイズを変更する機能
スペースは動的である必要があります（アイテムのサイズが小さくなると狭くなり、大きくなると広がります）

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

</div>

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

.actions {

--size: 50px;

display: flex;

gap: calc(var(--size) / 5);

}

.actions--m {

--size: 70px;

}

.actions__item {

width: var(--size);

height: var(--size);

}

Flexboxのgapプロパティに変数--sizeをどのように使用したかに注目してください。つまり、スペースは動的にすることができ、変数--sizeに依存します。

もう1つ便利な使用例を紹介します。
CSSアニメーションをカスタマイズするためにCSSの変数の継承を使用することです。以下は、CSS Tricksの記事から学びました。

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

@keyframes breath {

from {

transform: scale(var(--scaleStart));

}

to {

transform: scale(var(--scaleEnd));

}

.walk {

--scaleStart: 0.3;

--scaleEnd: 1.7;

animation: breath 2s alternate;

}

.run {

--scaleStart: 0.8;

--scaleEnd: 1.2;

animation: breath 0.5s alternate;

}

このようにすれば、@keyframesを2回定義する必要はなく、.walkと.run要素用にカスタマイズされたCSSの変数を継承することができます。

CSSの変数のバリデーションの仕組み

var()関数内の変数が無効な場合、ブラウザは使用されているプロパティに基づいて初期値または継承された値に置き換えます。

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

:root {

--main-color: 16px;

}

.section-title {

color: var(--main-color);

}

上記ではcolorプロパティに、16pxを使用しています。これは無効な値なので、ブラウザはcolorプロパティの値を下記のようにします。

プロパティは継承可能か？
- はいの場合: 親はプロパティを持っているか？
  - はいの場合: 値を継承
  - いいえの場合: 初期値に設定
- いいえの場合: 初期値に設定

下記は、ブラウザの動作を説明するフローチャートです。

var()関数内の変数が無効な場合

計算値時に無効な場合

上記は、技術的には計算値時に無効（invalid at computed-value time）と呼ばれます。これは、var()関数が変数を初期値で参照するか、CSSプロパティに無効な値を持つ有効な変数を使用している場合に発生します。

Lea Verouによる記事で見た例を紹介します。

.section-title {
  top: 10px;
  top: clamp(5px, var(--offset), 20px);
}

.section-title {

top: 10px;

top: clamp(5px, var(--offset), 20px);

}

ブラウザがclamp()関数をサポートしていない場合、top: 10px;はフォールバックとして機能するでしょうか？

簡単な答えは、ノーです。その理由は、ブラウザが無効なプロパティ値を検出した時点で、他のカスケード値はすでに破棄されているからです。つまり、top: 10px;は無視されます。

CSSの仕様によると、

計算値時に無効のコンセプトは、他の構文エラーのように変数が「早期に失敗」できないために存在します。そのため、ユーザーエージェントがプロパティ値が無効であることに気づくまでに、他のカスケードされた値はすでに破棄されます。

そのため、広くサポートされていないCSSの機能を使用する必要があり、その中にCSSの変数がある場合は、CSSの@supportsを使用する必要があります。
下記はさきほどの記事でそのテクニックを使用した方法です。

@supports (top: max(1em, 1px)) {
  #toc {
    top: max(0em, 11rem - var(--scrolltop) * 1px);
  }
}

@supports (top: max(1em, 1px)) {

#toc {

top: max(0em, 11rem - var(--scrolltop) * 1px);

}

CSSの変数の興味深い発見

URL値

Webページ内のすべてのリソースを制御できない場合があり、それらの一部はオンラインでホストする必要があるとします。その場合、リンクのURL値をCSSの変数に格納できます。

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

:root {

--main-bg: url("https://example.com/cool-image.jpg");

}

.section {

background: var(--main-bg);

}

しかし、CSSの変数をurl()で補完することは可能なのかと疑問に思うかもしれません。次のように考えてみてください。

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

:root {

--main-bg: "https://example.com/cool-image.jpg";

}

.section {

background: url(var(--main-bg));

}

var(--main-bg)はURL自体として扱われ、無効なので無理です。ブラウザが値を計算するまでに値は無効になり、期待通りには動作しません。

複数の値を保存する

便利なのは、変数の値に関係なく複数の値を格納できることです。それらの値が有効であれば、動作するはずです。

変数に複数の値を保存

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

:root {

--main-color: 35, 90, 209;

}

.section-title {

color: rgba(var(--main-color), 0.75);

}

rgba()関数に、RGB値をカンマ区切りでCSSの変数に格納しています。これにより、要素に応じてアルファ値を微調整したい場合に柔軟性を持たせることができます。

この場合の唯一の欠点は、デベロッパーツールのカラーピッカーでrgba値を調整できないことだけです。そのことが重要である場合は、rgbaの使用を再検討する必要があるかもしれません。

別の例として、backgroundプロパティで使用します。

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

:root {

--bg: linear-gradient(#000, #000) center/50px;

}

.section {

background: var(--bg);

}

.section--unique {

background: var(--bg) no-repeat;

}

2つのセクションがあり、そのうちの1つは背景がx軸とy軸で繰り返されないようにする必要があります。

@keyframes内で変数のアニメーション

CSSの変数の仕様書を読んだことがあるなら、animation-taintedという用語を見たことがあるでしょう。@keyframesルール内でCSSの変数を使用する場合、アニメーション化できないという考え方です。

<div class="box"></div>

1	<div class="box"></div>

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

.box {

width: 50px;

height: 50px;

background: #222;

--offset: 0;

transform: translateX(var(--offset));

animation: moveBox 1s infinite alternate;

}

@keyframes moveBox {

0% {

--offset: 0;

}

50% {

--offset: 50px;

}

100% {

--offset: 100px;

}

アニメーションがスムーズに機能しません。値(0, 50px, 100px)に対してのみボックスをアニメーションさせます。
CSSの仕様によると、

@keyframesルールで使用されているカスタムプロパティはアニメーションに汚染されてしまい、アニメーションプロパティのvar()関数で参照された場合の処理方法に影響します。

上記のアニメーションを機能させたい場合は、昔ながらの方法で行う必要があります。つまり、変数をアニメーション化する実際のプロパティに置き換える必要があります。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

@keyframes moveBox {

0% {

transform: translateX(0);

}

50% {

transform: translateX(50px);

}

100% {

transform: translateX(100px);

}

See the Pen
CSS Variables - Keyframes - 1 by Ahmad Shadeed (@shadeed)
on CodePen.

Dannie Vintherの指摘によると、キーフレーム内のCSSの変数を@propertyで登録することで、キーフレーム内の変数をアニメーションさせることが可能だそうです。これは現在、Chromiumでサポートされています。

@property --offset {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

@property --offset {

syntax: "<length-percentage>";

inherits: true;

initial-value: 0px;

}

See the Pen
CSS Variables - Keyframes - 1 by Dannie Vinther (@dannievinther)
on CodePen.

変数で計算

CSSの変数で計算ができることを知っていましたか？
前述した下記の例で見てみましょう。

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

.c-avatar {

display: inline-block;

width: calc(var(--size, 1) * 30px);

height: calc(var(--size, 1) * 30px);

}

アバターにはバリエーションがあるかもしれません。デフォルト値を1に設定したので、デフォルトのサイズは30px * 30pxです。さまざまなクラスのバリエーションと--size値を変更すると、アバターのサイズが変わることに注目してください。

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

.c-avatar--small {

--size: 2;

}

.c-avatar--medium {

--size: 3;

}

.c-avatar--large {

--size: 4;

}

デベロッパーツールで使用できる便利なテクニック

CSSの変数の操作を簡単にするためにデベロッパーツールで使用できる便利なテクニックがあります！

カラーの値を確認する機能

CSSの変数を使用しているときに、カラーや背景の値を視覚的に表示できると便利です。ChromeとEdgeでは視覚的に表示されます。

カラーの値を視覚的に表示

計算値を確認する機能

CSSの変数の計算された値を確認するには、ホバーまたはクリックします。

計算値を表示

Safariを除いて、すべての計算値はホバーで表示できます。Safariは「=」をクリックします。

変数名のオートコンプリート

大規模なプロジェクトで、変数名を全部覚えるのは大変です。
でも大丈夫、--を入力するだけで、変数のリストが表示されます。Chrome、Firefox、Edgeで動作します。

変数名のオートコンプリート

変数の無効化

CSSの変数を使用しているすべての要素から無効にする必要がある場合は、その変数が定義されている要素のチェックを外すことで無効になります。

変数の無効化

終わりに

CSSの変数についてばかりでしたね。やっと変数のページができて嬉しく思います。もしこれがお役に立てば幸いです。ここまで読んでくれて、ありがとうございます。

私は電子ブックを書いています

CSSのデバッグに関する電子書籍を書いていることをお知らせします。

興味がある場合は、debuggingcss.comにアクセスして、本に関する最新情報を購読してください。

コメントや提案があれば、@shadeed9までお願いします。

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

はじめに

CSSの変数（カスタムプロパティ）とは

変数名の付け方

CSSの変数のスコープ

CSSの変数のフォールバック

CSSの変数の効果的な使用例

コンポーネントのサイズ制御をCSSの変数で定義する

HSLカラーをCSSの変数で定義する

CSSの変数で比例を維持したままサイズ変更

CSS GridをCSSの変数で定義する

グラデーションをCSSの変数で定義

背景のポジションをCSSの変数で定義

ダークモードとライトモードの切り替えをCSSの変数で定義

デフォルト値をCSSの変数で定義

ラッパーの幅をCSSの変数で定義

インラインでCSSの変数を定義

ダイナミックなグリッドのアイテム

ユーザーのアバター

メディアクエリでCSSの変数を定義

CSSの変数の継承

CSSの変数のバリデーションの仕組み

計算値時に無効な場合

CSSの変数の興味深い発見

URL値

複数の値を保存する

@keyframes内で変数のアニメーション

変数で計算

デベロッパーツールで使用できる便利なテクニック

カラーの値を確認する機能

計算値を確認する機能

変数名のオートコンプリート

変数の無効化

終わりに

私は電子ブックを書いています

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info