on:2020年10月28日sponsorsCSSの変数(カスタムプロパティ)の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。Shadeed下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。カスタムプロパティ)がブラウザでサポートされるようになって4年が経ちました。プロジェクトや状況に応じて、使用されていると思います。CSSの変数は非常に便利で使いやすいのですが、フロントエンドのデベロッパーが間違った使い方をしたり、誤解していることがあります。この記事では、CSSの変数についてすべての情報を得ることができるドキュメントがあればと思い、文章化しました。使用例を用いて、CSSの変数について知っておくべきことを学ぶことができます。準備はいいですか?それでは、始めましょう!CSSの変数(カスタムプロパティ)とはCSSの変数とは、CSSの値の再利用性と冗長性の削減を目的として、CSSドキュメント内で定義される値のことです。CSSの変数の基本的な使用例を見てましょう。セクションの実装セクションのボーダー、タイトル、疑似要素はすべて同じカラーです。#235ad1;}このスタイルシートでは、#235ad1という同じ値が3回使用されています。大規模なプロジェクトで複数のCSSファイルを使用し、カラーを変更するように指示されたと想像してみてください。簡単に思い浮かぶのは、古き良き時代の「検索と置換」です。CSSの変数を使用すると、これはさらに簡単になります。変数名にダブルハイフン(--)をつけ、とりあえず:rootまたは<html>要素で変数を定義します。変数を値に使用する時には、var()に変数名を定義します。var(--color-primary);}前述のスタイルシートより、すっきりしましたね。変数--color-primaryは:root要素で定義したので、グローバル変数です。すべての値でこのCSSの変数を使用できます。変数のスコープを設定し、特定の要素にだけ変数を適用することもできます。変数名の付け方プログラミング言語での変数の命名と同様に、CSSの変数の命名もそれほど違いはありません。CSSの変数名には、前にダブルハイフン(--)をつけ、英数字・アンダースコア・ハイフンを使用できます。大文字と小文字は区別されることに注意してください。*/--primary$%#%$#}CSSの変数のスコープCSSの変数で便利な点は、スコープを設定できることです。このコンセプトは他のプログラミング言語と似ています。JavaScriptを例に見てましょう。cool";console.log(element);}変数elementのスコープはグローバルなので、cool()関数内でアクセスできます。変数otherElementはcool()関数内でしかアクセスできません。このコンセプトをCSSの変数に当てはめてみましょう。var(--primary-color);}変数--primary-colorは:root要素で定義されているのでグローバルで、ドキュメント内のすべての要素でアクセスできます。.section-titleの宣言ブロックのスコープ内で再定義することで、その新しい値は.section-title内でのみ機能します。スコープのコンセプトを図にしてみました。CSSの変数のスコープのコンセプトセクションのタイトルのカラーに使用される--primary-colorが定義されています。articlesのカラーを変更したいので、--primary-colorの値を上書きしています。変数--unitにも同じことが当てはまります。上記の図のCSSは、下記の通りです。2rem;}CSSの変数のフォールバックサポートされていないブラウザにフォールバックを提供するという意味ではありません。ここでのフォールバックは、CSSの変数で使用できる機能です。下記の例をご覧ください。#222);}var()内に2つの値が定義されていることに注目してください。2番目の#222は何らかの理由で変数--primary-colorが定義されていない場合のみ機能します。var()はネストすることもできます。#222));}この機能は、変数の値が特定のアクションに依存している場合に便利です。変数が値を持っていない場合、変数のフォールバックを用意しておくことが重要です。CSSの変数の効果的な使用例コンポーネントのサイズ制御をCSSの変数で定義するデザインシステムでは、ボタンに複数のサイズがあるのが一般的です。large)があります。これらのサイズをCSSの変数で実装すると、非常に簡単です。1.5rem;}ボタンコンポーネントのスコープ内で変数--unitを変更することで、ボタンのさまざまなバリエーションを作成できます。色相の値によってカラーが決まり、彩度と明度の値によってカラーの濃さや明るさを調整します。33;}変数--primary-bの値を減らして、ボタンを暗くしていることに注目してください。CSSのカラーについてもっと知りたい場合は、CSSに関する詳細な記事をご覧ください。XDなどのデザインプログラムを使用したことがある場合は、Shiftキーを押しながら要素のサイズを変更して、要素が歪まないようにすることをお勧めします。CSSで同じ事を直接行う方法はありませんが、CSSの変数を使用した簡単な回避策があります。CSSの変数で比例を維持したままサイズ変更アイコンがあり、その幅と高さが同じにしなければならないとします。変数--sizeを定義して、幅と高さの両方に使用します。var(--size);}これで完成です!変数--sizeの値を変更するだけで、Shiftキーのリサイズを真似ることができます。この仕組みについては、こちらの記事をご覧ください。Gridにも非常に便利です。グリッドコンテナに、定義された優先幅に基づいて子アイテムを表示させたい場合を想像してみてください。各バリエーションごとにクラスを作成してCSSを複製するよりも、変数を使用した方がはるかに簡単です。500px;}たったこれだけのCSSで、柔軟性があり、メンテナンスが容易で、他のプロジェクトでも使用できるフルグリッドシステムを作成できます。同じコンセプトをgrid-gapプロパティにも適用できます。GridのgapをCSSの変数で定義グラデーションをCSSの変数で定義システム全体で使用されているグラデーションや背景がある場合、それを完全な値としてCSSの変数に定義することをお勧めします。var(--primary-gradient);}あるいは、単一の値を格納することもできます。グラデーションの角度を例に挙げてみましょう。背景のポジションをCSSの変数で定義CSSの変数内に複数の値を含めることもできます。これは特定のコンテキストに基づいて異なるポジションに配置する必要がある要素がある場合に便利です。var(--pos);}ダークモードとライトモードの切り替えをCSSの変数で定義ダークモードとライトモードは、今まで以上にWebサイトに要求されるようになりました。CSSの変数を使用することで、それら2つのバージョンを保存し、ユーザーやシステムの設定に応じて切り替えることができます。場合によっては、JavaScriptでCSSの変数を設定する必要があります。拡張可能なコンポーネントのheightを取得する必要があるとしましょう。Scharnaglの記事から学びました。変数--details-height-openは空で、特定のHTML要素に追加されます。これにはピクセル値が含まれます。JavaScriptが何らかの理由で失敗した場合、適切なデフォルト値またはフォールバック値を提供することが重要です。auto);}値autoは、JavaScriptが失敗し、CSSの変数--details-height-openが定義されていない場合のフォールバック値です。ラッパーの幅をCSSの変数で定義Webページのラッパーには複数のバリエーションがあります。あるページでは小さなラッパーが、別のページでは大きなラッパーが必要になるかもしれません。そのような場合、CSSの変数で実装すると簡単です。800px;}インラインでCSSの変数を定義CSSの変数をインラインスタイルで使用すると、気づいていない多くの新しい可能性が開かれます。以前、記事を書いたので、その中から興味深い使用例をいくつか紹介します。これは本番のWebサイトにとって完璧なアプローチではないかもしれませんが、さまざまなアイデアのプロトタイプやテストには役立ちます。ダイナミックなグリッドのアイテムstyle属性に変数--item-widthを加えます。このアプローチは、例えば、グリッドのプロトタイプに役立ちます。1rem;}デモページユーザーのアバターユーザーのアバターもう1つ便利な使用例は、要素のサイズ調整です。アバター画像を4つの異なるサイズにして、そのサイズを1つの変数で制御できます。30px);}上記のCSSを分析してみましょう。1)があり、値がstyle属性で追加されなかった場合に備えてフォールバック値を加えておきます。メディアクエリでCSSの変数を定義CSSの変数とメディアクエリを組み合わせることで、Webサイト全体で使用される変数を微調整するのに役立ちます。私が考える最も簡単な例は、変数でスペースの値を変更することです。16px;}}変数--gutterを使用する要素は、ビューポートのサイズに応じてスペースを変更します。これってすごいことだと思いませんか?CSSの変数の継承CSSの変数は、継承されます。親要素に変数が定義されている場合、子孫要素は同じ変数を継承します。下記の例をご覧ください。var(--size);}.child要素は、親から継承した結果として、変数--sizeにアクセスできます。すればこの恩恵を受けることができるのか疑問に思うかもしれません。その実際の例を見てみましょう。親から変数を継承する次の要件を持つアイテムのグループがあります。var(--size);}Flexboxのgapプロパティに変数--sizeをどのように使用したかに注目してください。スペースは動的にすることができ、変数--sizeに依存します。1つ便利な使用例を紹介します。CSSアニメーションをカスタマイズするためにCSSの変数の継承を使用することです。Tricksの記事から学びました。alternate;}このようにすれば、@keyframesを2回定義する必要はなく、.walkと.run要素用にカスタマイズされたCSSの変数を継承することができます。CSSの変数のバリデーションの仕組みvar()関数内の変数が無効な場合、ブラウザは使用されているプロパティに基づいて初期値または継承された値に置き換えます。var(--main-color);}上記ではcolorプロパティに、16pxを使用しています。これは無効な値なので、ブラウザはcolorプロパティの値を下記のようにします。下記は、ブラウザの動作を説明するフローチャートです。time)と呼ばれます。これは、var()関数が変数を初期値で参照するか、CSSプロパティに無効な値を持つ有効な変数を使用している場合に発生します。Verouによる記事で見た例を紹介します。10px;はフォールバックとして機能するでしょうか?簡単な答えは、ノーです。その理由は、ブラウザが無効なプロパティ値を検出した時点で、他のカスケード値はすでに破棄されているからです。10px;は無視されます。計算値時に無効のコンセプトは、他の構文エラーのように変数が「早期に失敗」できないために存在します。そのため、ユーザーエージェントがプロパティ値が無効であることに気づくまでに、他のカスケードされた値はすでに破棄されます。そのため、広くサポートされていないCSSの機能を使用する必要があり、その中にCSSの変数がある場合は、CSSの@supportsを使用する必要があります。下記はさきほどの記事でそのテクニックを使用した方法です。1px);}}CSSの変数の興味深い発見URL値Webページ内のすべてのリソースを制御できない場合があり、それらの一部はオンラインでホストする必要があるとします。その場合、リンクのURL値をCSSの変数に格納できます。var(--main-bg);}しかし、CSSの変数をurl()で補完することは可能なのかと疑問に思うかもしれません。次のように考えてみてください。url(var(--main-bg));}var(--main-bg)はURL自体として扱われ、無効なので無理です。ブラウザが値を計算するまでに値は無効になり、期待通りには動作しません。複数の値を保存する便利なのは、変数の値に関係なく複数の値を格納できることです。それらの値が有効であれば、動作するはずです。0.75);}rgba()関数に、RGB値をカンマ区切りでCSSの変数に格納しています。これにより、要素に応じてアルファ値を微調整したい場合に柔軟性を持たせることができます。この場合の唯一の欠点は、デベロッパーツールのカラーピッカーでrgba値を調整できないことだけです。そのことが重要である場合は、rgbaの使用を再検討する必要があるかもしれません。別の例として、backgroundプロパティで使用します。no-repeat;}2つのセクションがあり、そのうちの1つは背景がx軸とy軸で繰り返されないようにする必要があります。@keyframes内で変数のアニメーションCSSの変数の仕様書を読んだことがあるなら、animation-taintedという用語を見たことがあるでしょう。@keyframesルール内でCSSの変数を使用する場合、アニメーション化できないという考え方です。100px;}}アニメーションがスムーズに機能しません。100px)に対してのみボックスをアニメーションさせます。CSSの仕様によると、@keyframesルールで使用されているカスタムプロパティはアニメーションに汚染されてしまい、アニメーションプロパティのvar()関数で参照された場合の処理方法に影響します。上記のアニメーションを機能させたい場合は、昔ながらの方法で行う必要があります。変数をアニメーション化する実際のプロパティに置き換える必要があります。Vintherの指摘によると、キーフレーム内のCSSの変数を@propertyで登録することで、キーフレーム内の変数をアニメーションさせることが可能だそうです。これは現在、Chromiumでサポートされています。CodePen.変数で計算CSSの変数で計算ができることを知っていましたか?前述した下記の例で見てみましょう。30px);}アバターにはバリエーションがあるかもしれません。さまざまなクラスのバリエーションと--size値を変更すると、アバターのサイズが変わることに注目してください。4;}デベロッパーツールで使用できる便利なテクニックCSSの変数の操作を簡単にするためにデベロッパーツールで使用できる便利なテクニックがあります!カラーの値を確認する機能CSSの変数を使用しているときに、カラーや背景の値を視覚的に表示できると便利です。ChromeとEdgeでは視覚的に表示されます。計算値を確認する機能CSSの変数の計算された値を確認するには、ホバーまたはクリックします。計算値を表示Safariを除いて、すべての計算値はホバーで表示できます。Safariは「=」をクリックします。変数名のオートコンプリート大規模なプロジェクトで、変数名を全部覚えるのは大変です。大丈夫、--を入力するだけで、変数のリストが表示されます。Chrome、Firefox、Edgeで動作します。変数名のオートコンプリート変数の無効化CSSの変数を使用しているすべての要素から無効にする必要がある場合は、その変数が定義されている要素のチェックを外すことで無効になります。終わりにCSSの変数についてばかりでしたね。変数のページができて嬉しく思います。これがお役に立てば幸いです。ここまで読んでくれて、ありがとうございます。私は電子ブックを書いていますCSSのデバッグに関する電子書籍を書いていることをお知らせします。興味がある場合は、debuggingcss.comにアクセスして、本に関する最新情報を購読してください。コメントや提案があれば、@shadeed9までお願いします。