CSS変数の初心者向けガイド（別名CSSカスタムプロパティ）

目次：

• プリプロセッサのCSS変数＃
• ネイティブCSSの変数（カスタムプロパティ）＃
• なぜ「カスタムプロパティ」なのか？ ＃
• CSS変数はどこで定義されていますか？ ＃
• CSS変数に関するテクニカルノート＃
• var()関数を理解する＃
• calc()でのCSS変数の使用＃
• CSS変数を使ったトリック＃

プリプロセッサのCSS変数

CSSプリプロセッサはCSS変数を10年以上使用しています。 ここではこれらのオプションについて詳しくは説明しませんが、一般的なプリプロセッサライブラリのそれぞれが変数をどのように使用するかを知っておくと役に立ちます。

Sass（またはSCSS）では、次のように変数を宣言します。

ドル記号（$）に注意してください。 最初の行は、変数とその値の宣言です。 次の2つのブロックは、スタイルシートの後半で使用される変数の例です。

Less.jsの変数は、 @記号を使用します。

スタイラスでは、変数は次のようになります。

これらのサードパーティテクノロジを使用して変数をさらに詳しく調べたい場合は、上記の各プリプロセッサの個々のドキュメントセクションを参照してください。

ネイティブCSSの変数（カスタムプロパティ）

これにより、CSS仕様で定義されているように、CSS変数またはカスタムプロパティが表示されます。 プレーンCSSで変数を宣言するには、変数またはプロパティに選択したカスタム名の前に2つのハイフンを配置し、 var()関数を使用してその値を任意の場所に配置します。

この例では、2つのCSS変数--mainと--accentを定義しました。 次に、2つの異なる要素で各CSS変数を使用し、それらが開く柔軟性を示しました。

他のプログラミング言語の変数と同様に、これにより、1つの場所で変数を宣言できます。 後でスタイルシートのどこでもその値を変更したい場合は、元の宣言を変更するだけで、変数を使用するすべての場所に適用されます。

なぜ「カスタムプロパティ」なのか？

日常会話では、開発者は、プリプロセッサとプログラミング言語が同じ機能を参照する方法に沿って、この機能を「CSS変数」と呼ぶことがよくあります。 ただし、厳密に技術的な観点からは、これらは実際には「変数」ではなく、カスタムプロパティです。

これらは、プロパティ名の前に表示される2つのダッシュを除いて、CSSの事前定義されたプロパティと同じ構文を持っています。 2つのダッシュにより、CSS作成者は、通常のCSSプロパティとの競合を恐れることなく、有効な破線の識別子を使用できます。

仕様では、2つのダッシュだけが無効であり（将来の使用のために予約されているようです）、CSSは、作成者が定義したカスタムプロパティとしての使用を超えて、有効なダッシュ識別子に意味を与えることはありません。

通常のCSSプロパティとは異なり、カスタムプロパティでは大文字と小文字が区別されます。 これは、 --main-colorが--Main-Colorと同じではないことを意味します。 カスタムプロパティ名に含める有効な文字は、文字、数字、アンダースコア、およびハイフンです。

CSS変数はどこで定義されていますか？

上記の例でわかるように、HTMLドキュメントまたはShadowDOMのルート要素で直接定義されたCSSカスタムプロパティがよく見られます。 :root疑似クラスセレクターはこれを実現します。

ただし、CSS変数はルート要素でのみ定義されるだけでなく、他の場所で定義すると有益な場合がよくあります。 :rootセレクターが一般的に選択されるのは、これが常にDOMツリーの最上位の要素を対象としているためです（完全なドキュメントであろうとシャドウDOMであろうと）。

ほとんどの場合、 html要素（HTMLドキュメントのルート要素）またはbody要素にカスタムプロパティを定義しても同じ結果が得られます。 :rootを使用すると、コードをより将来にわたって利用できるようになり（たとえば、仕様がルートとして新しい要素を追加した場合、CSSは同じままになります）、スタイルシートを別の種類のドキュメントに適用することもできると思います。別のルート要素があります。

たとえば、次のコードは、カスタムプロパティを.sidebar要素でのみ使用するように制限します。

デモンストレーションの目的で、 :rootで定義された変数がよく見られますが、実用的な場所であればどこでも使用できます。 実際、多くの開発者は、初期開発時に小さなモジュールのDOMツリーの下位に設定し、スコープが大きい値を作成するときに:rootに向かって作業することをお勧めします。

CSS変数に関するテクニカルノート

CSS変数は、任意の要素に適用できることに加えて、かなり柔軟性があり、扱いが簡単です。

ここに注目に値するいくつかの事柄があります：

• それらは通常のCSS継承とカスケードルールで解決されます
• メディアクエリやその他の条件付きルールで使用できます
• 要素のstyle属性でそれらを定義できます
• これらは、CSSオブジェクトモデルの機能を使用して読み取りまたは設定できます。

基本的にCSS変数をネストできることも注目に値します。 次の例に注意してください。

--main-color変数を定義したので、次のCSS変数の値と同じ変数名を使用していることに注意してください。

CSS変数値で!importantキーワードを使用することもできますが、これは、ドキュメント内の1つ以上の要素で使用される値ではなく、他の変数定義に関連する変数自体にのみ「重要度」を適用します。 これが紛らわしい場合は、次に例を示します。

上記の例では、変数定義の後半にオレンジが表示されていても、背景色は「水色」になります。 ただし、 body要素の背景値自体は重要ではありません。

CSS変数には、 initial 、 inherit 、 unsetなどのCSS全体のキーワード値を含めることもできますが、 allプロパティはCSS変数に影響しません（つまり、リセットされません）。

var()関数を理解する

このCSS変数チュートリアルのいくつかの典型的な例で使用されているvar()関数はすでに見てきました。 しかし、 var()には、これまで説明してきた以上のものがあります。

まず、 var()関数は値でのみ有効です。 プロパティ名またはセレクターはCSS変数を使用できません。 また、メディアクエリ値はCSS変数を使用できません（たとえば、@ media @media (max-width: var(--my-var))は無効です）。

var()関数は2つの引数を取ります。

• 含めるカスタムプロパティの名前
• カスタムプロパティが無効な場合のフォールバック値

2番目の引数が有効になる例を次に示します。

上記のコードでは、最初の変数名を英国式またはカナダ式の単語「color」を使用して綴っていますが、変数を使用するときに米国式の綴り「color」を組み込んだことに注意してください。 これにより、変数が技術的に無効になるため、代わりに無地の灰色（ #ccc ）の背景が有効になります。

フォールバック値には独自のコンマを含めることができることにも注意してください。 したがって、たとえば、フォールバックがフォントスタックである場合、これはそれを定義するための有効な方法になります。

変数に欠陥があり、 --main-fontの代わりに不明な--main-typeを宣言していることに再度注意してください。 これにより、代替フォントスタックであるフォールバック値がトリガーされます。 したがって、最初のコンマの後のすべて（他のコンマを含む）はフォールバック値です。

パーシャルにCSS変数を使用する

CSS変数を定義する場合、それが保持する値は、それ自体が有効なCSS値である必要はありません。 完全な値の一部として使用できる部分的な値にすることができます。

たとえば、フォントスタックを分割できます。

この場合、各変数値はそれ自体で機能しますが、それは要点を示しています。 rgba()色表記を使用して、より工夫された例を試してみましょう。

これがどれほど有用であるかがわかり、本質的に値を動的に「構築」することができます。

calc()でのCSS変数の使用

CSS変数をプロジェクトに組み込むための便利な方法の1つは、 calc()関数と組み合わせることです。 ご存知かもしれませんが、 calc()を使用すると、値内で計算を実行できます。 したがって、次のようなことができます。

CSSカスタムプロパティを使用すると、たとえば事前定義されたサイズを使用して、 calc()を次のレベルに引き上げることができます。 Ahmad Shadeedは似たようなことを説明しました、そしてここに例があります：

これを設定すると、メディアクエリ内で.moduleおよび.module-*ルールセットを使用できるため、特定のビューポートサイズやその他のメディア機能に対してこれらのスタイルを条件付きで表示できます。 小/中/大モジュールはプライマリモジュールと同じクラスを持ちますが、必要に応じてモジュールサイズのみが上書きされます。 上記の例では、サイズの初期240値は一種のデフォルトとして機能しますが、フォールバックとして機能するようにvar()の2番目の引数として240pxを渡すこともできます。

CSS変数を使ったトリック

何人かの開発者は、長年にわたってCSS変数を使用するためのヒントとコツを共有してきました。 これは主に初心者向けのチュートリアルであるため、ここでは詳しく説明しませんが、いくつかの簡単な概要を以下に示します。

• 前述したように、アスペクト比ボックスの場合と同様に、CSS変数をインラインスタイルで使用できます。
• スペース文字はCSS変数の有効な値であり、これによりオン/オフのトリック（ダークモードなど）を実行できます。これについては、Leaの投稿で読むことができます。
• ホバースタイルをインラインスタイルで作成することはできませんが、CSS変数を使用してこれを回避することはできます。
• ここで概説するように、CSS変数はマルチカラーSVGをより簡単に作成するのに役立ちます。
• この投稿で詳細に説明されているCSS変数を使用して、実用的で保守可能な設計システムとテーマを構築できます。
• Michelle Barkerが説明しているように、CSS変数を使用して、グリッドレイアウト機能を使用してより効率的で保守しやすいグリッドを構築できます。

結論

CSS変数（CSSカスタムプロパティ）は、この便利な機能をサポートする世界中で使用されているブラウザーの90％以上で、今日すぐに使用できます。 基本と構文についてのこの議論が、まだ行っていない場合は、最新のプロジェクトでCSS変数を検討することを奨励することを願っています。

CSS変数の使用が一部のグローバルテーマの色に制限されている場合、このチュートリアルは、CSS変数をさらに活用するように促し、独自のトリックを思い付く可能性があります。

CSS変数の使用が終了したので、他のガイドをいくつか確認してください。

• CSSグリッドレイアウト
• Parcel.jsの紹介
• CSSフレックスボックスチュートリアル
• 初心者向けのWebpack
• 初心者開発者向けのマイクロインタラクションチュートリアル

このCSS変数のチュートリアルに関して質問がある場合は、以下のコメントで遠慮なく送信してください。

ChrisFitzgeraldとKarolKによるレイアウトとプレゼンテーション。