準備はいいですか？もしそうなら、始めましょう。
前書き
CSS変数は、2つの目的でCSSで宣言されている値です。1つ目は、そのような値の再利用です。2つ目は、CSSコードの量を減らすことです。簡単な例を見てみましょう。
ページ要素のスタイリング
.section {
border: 2px solid #235ad1;
}
.section-title {
color: #235ad1;
}
.section-title::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #235ad1;
}
このCSSの例で
#235ad1は、値を3回使用しています。これがより大きなプロジェクトの一部であると想像してください。その中で、同様のスタイルが多くのCSSファイルに散在しています。あなたは色を変えるように頼まれました#235ad1。このような状況では、コードエディタの機能を使用して文字列値を見つけて置き換えるのが最善の方法です。
しかし、CSS変数を使用する場合、そのようなタスクははるかに簡単に解決できます。 CSS変数を宣言する方法について話しましょう。変数名の前には2つのハイフンを付ける必要があります。
:root要素の疑似クラスのスタイル変数を宣言しましょう<html>：
:root {
--color-primary: #235ad1;
}
.section {
border: 2px solid var(--color-primary);
}
.section-title {
color: var(--color-primary);
}
.section-title::before {
/* */
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$%#%$#
}
可変スコープ
CSS変数の便利な機能の1つは、スコープを設定できることです。このアイデアは、さまざまなプログラミング言語で適用されるのと同じ原則に基づいています。例-JavaScriptの場合：
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);
}
変数
--primary-colorはグローバルであり、ドキュメントの任意の要素から参照できます。ブロック.section-titleでオーバーライドすると、その新しい値はこのブロックでのみ使用できるという事実につながります。
これはこの考えを説明するための図です。
CSS変数の範囲
これは
--primary-color、セクション見出しの色を設定するために使用される変数です。注目の著者と最近の記事のセクションの見出しの色をカスタマイズする必要があります。したがって、これらのセクションのスタイルでは、この変数をオーバーライドします。同じことが変数でも起こります--unit。前の図が基づいているスタイルは次のとおりです。
/* */
: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);
}
var()複数の値が
関数に渡されることに注意してください。2番目の、#222は、変数が--primary-color定義されていない場合にのみ使用されます。フォールバック値を指定するときは、ネストされた構成を使用することもできますvar()。
.section-title {
color: var(--primary-color, var(--black, #222));
}
変数を操作するこのアプローチは、変数の値が何らかのアクションに依存している場合に役立ちます。変数に値がない場合は、フォールバック値の使用を検討することが重要です。
CSS変数を使用するための例とシナリオ
▍コンポーネントサイズ制御
さまざまなサイズのコンポーネント
設計システムには、たとえば、さまざまなサイズのボタンが含まれていることがよくあります。原則として、3つのサイズ（小、通常、大）について話します。CSS変数を使用すると、そのようなボタンや他の同様の要素を非常に簡単に説明できます。
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
--unitボタンコンポーネントに対応するスコープ内
の変数の値を変更することにより、ボタンのさまざまなバリアントを作成します。
▍CSS変数とHSLカラー
HSL（色相、彩度、明るさ-色相、彩度、明るさ）は、H成分が色を決定し、S成分とL成分が色の彩度と明るさを決定するカラーモデルです。
HSLを使用して指定された要素の色
: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-color 0.3s ease-out;
}
/* */
.button:hover {
--primary-b: 33%;
}
変数の値を減らすことで、ボタンの色を暗くしたことに注目してください
--primary-b。
CSSで色を使用するトピックに興味がある場合は、これに関する私の記事をご覧ください。
▍比率を維持しながら要素のサイズを変更する
Photoshop、Sketch、Figma、Adobe XDなどのデザインプログラムで作業したことがある場合は、
Shiftオブジェクトのサイズを変更するときにキーを使用することを知っているかもしれません。この手法のおかげで、要素の比率を歪めることを回避できます。
アスペクト比を維持しながらCSSの要素のサイズを変更するための標準的なメカニズムはありません。ただし、ご想像のとおり、CSS変数を使用することで、この制限を回避できます。
CSS変数を使用した要素サイズの調整
幅と高さが同じでなければならないアイコンがあるとします。これを実現するために、CSS変数を定義し、
--sizeそれを使用して要素の幅と高さを調整しました。
.icon {
--size: 22px;
width: var(--size);
height: var(--size);
}
その結果、この手法は、
Shiftオブジェクトのサイズを変更するときのキーの使用をシミュレートすることがわかりました。1つの変数の値を変更するだけで十分です--size。このトピックについては、こちらで詳しく説明しています。
▍CSSグリッドベースのレイアウト
CSS変数は、CSSグリッドに基づいてページレイアウトを設計するときに非常に役立ちます。事前定義された要素の幅に基づいて、グリッドコンテナに子をレンダリングさせる必要があると想像してください。CSSコードの重複につながる要素表示ごとにクラスを作成する代わりに、このタスクはCSS変数を使用して解決できます。
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;
}
このアプローチにより、さまざまなプロジェクトでの使用に適した、保守が容易な柔軟なグリッドレイアウトを作成できます。同じ考え方をプロパティの設定にも適用できます
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;
}
--gap変数を使用してgrid-gapプロパティを設定する
複雑な構造の変数値の保存
▍CSSグラデーション
「複雑な構造の値」とは、たとえば、グラデーションのようなものを意味します。プロジェクトの多くの場所で使用されるグラデーションまたは背景がプロジェクトにある場合は、それらの説明をCSS変数に格納するのが理にかなっています。
: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;
}
変数--angleを変更することによって作成されたさまざまな勾配オプション
▍ポジションの背景
すでに述べたように、CSS変数は複雑な値を格納できます。これは、何が起こっているかに応じて、ページのさまざまな場所に配置する必要がある要素がある場合に役立ちます。
--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変数を使用して、色に関する情報を格納し、システムパラメータまたはユーザーによる設定を分析した後でそれらを切り替えることができます。
明るいテーマと暗いテーマ
: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;
}
これが上記のアイデアのビデオデモです。
デフォルト値の設定
状況によっては、JavaScriptを使用してCSS変数を設定する必要があります。
heightサイズ変更可能な要素のプロパティ値を設定する必要があると想像してください。この記事からこのテクニックについて学びました。
変数は
--details-height-open最初は空です。ある要素のスタイルの説明に使用する予定です。要素の高さをピクセル単位で含める必要があります。何らかの理由でJavaScriptからこの変数の値を設定できない場合は、代わりにデフォルトのフォールバック値の使用を提供することが重要です。
.section.is-active {
max-height: var(--details-height-open, auto);
}
この例では、デフォルトが再生され
autoます。JavaScriptが変数の値を設定できない場合に適用されます--details-height-open。
コンテナ要素の幅を調整する
コンテナ
要素の幅の制御Webページで使用されるコンテナ要素は、さまざまな状況でさまざまなサイズを持つことができます。おそらく、1つのページに小さなコンテナが必要で、別のページに大きなコンテナが必要な場合があります。このような場合、CSS変数を正常に使用してコンテナのサイズを制御できます。
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}
インラインスタイル
インラインスタイルでCSS変数を使用すると、フロントエンド開発者が存在することを知らなかった多くの新しい可能性を開くことができます。実際、私はこれについての記事全体を書きましたが、ここでは、インラインスタイルで変数を使用する最も興味深い方法について説明します。
これらの方法を本番環境で使用しないのが最善の場合があります。これらは、プロトタイピングやさまざまなデザインアイデアの調査に非常に適しています。
▍動的グリッド要素
たとえば、要素の幅を調整
--item-widthするには、要素属性で直接宣言された変数を使用できますstyle。このアプローチは、グリッドレイアウトのプロトタイプを作成するときに役立ちます。
要素のHTMLは次のとおりです。
<div class="wrapper" style="--item-width: 250px;">
<div></div>
<div></div>
<div></div>
</div>
この要素に適用されるスタイルは次のとおりです。
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
ここでは、このセクションの例を試すことができます。
▍ユーザーアバター
さまざまなサイズのアバター
インラインスタイルでのCSS変数のもう1つの興味深い使用法は、さまざまなサイズの要素の作成です。さまざまな状況で、さまざまなサイズのユーザーのアバターを表示する必要があるとします。そうは言っても、単一のCSS変数を使用してそのサイズを制御したいと思います。
マークアップは次のとおりです。
<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);
}
これらのスタイルを分析してみましょう。
- デザインがあります
var(--size, 1)。デフォルト値を提供します。スタイル付き要素の--size属性を使用して変数の値が設定されていない場合に使用されますstyle。 - 最小要素サイズはに設定されてい
30px*30pxます。
メディアクエリ
CSS変数とメディアクエリを一緒に使用すると、ウェブサイトのすべてのページで使用される変数の値をカスタマイズするのに大いに役立ちます。私の頭に浮かぶこのテクニックを使用する最も簡単な例は、要素間の間隔を調整することです。
:root {
--gutter: 8px;
}
@media (min-width: 800px) {
:root {
--gutter: 16px;
}
}
その結果、変数を使用する要素のプロパティ
--gutterは、ブラウザのビューポートの幅に依存します。私にとって、これは素晴らしい機会です。
継承
CSS変数は継承をサポートします。CSS変数が親要素内で宣言されている場合、子孫要素はこの変数を継承します。例を見てみましょう。
HTMLは次のとおりです。
<div class="parent">
<p class="child"></p>
</div>
スタイルは次のとおりです。
.parent {
--size: 20px;
}
.child {
font-size: var(--size);
}
要素は、要素のスタイルで宣言され
.childた変数を継承します。アイテムはこの変数にアクセスできます。これはとても面白いと思います。おそらくあなたは今、それが私たちにどのように役立つのか疑問に思っています。次の実際の例がこの質問に答えるのに役立つと思います。--size.parent.child
CSS変数の継承
次の要件を持つボタンのグループがあります。
- 単一の変数の値を設定することにより、すべての要素のサイズを変更する機能。
- 要素間の距離は、サイズに応じて動的に変化する必要があります。要素が増加すると、要素間の距離が増加し、減少すると、要素間の距離が減少します。
この例のマークアップは次のとおりです。
<div class="actions">
<div class="actions__item"></div>
<div class="actions__item"></div>
<div class="actions__item"></div>
</div>
スタイルは次のとおりです。
.actions {
--size: 50px;
display: flex;
gap: calc(var(--size) / 5);
}
.actions--m {
--size: 70px;
}
.actions__item {
width: var(--size);
height: var(--size);
}
Flexboxアイテムの
--sizeプロパティを設定するとき
に変数をどのように使用したかに注目してくださいgap。これにより、変数に基づいて、--size要素間の距離を動的に変更できます
。CSS変数の継承メカニズムを使用する別の例は、CSSアニメーションを設定することによって示されます。ここからこの例を取り上げました。
@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;
}
このアプローチでは、2回宣言する必要はありません
@keyframes。継承された変数の値をスタイル設定.walkして.runオーバーライドします。
CSS変数の検証
関数
var()に渡されたCSS変数に問題があることが判明した場合、ブラウザーはこの変数の値を対応するプロパティの元の（継承された）値に置き換えます。
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}
ここで、値は
--main-colorプロパティの設定に使用される変数にcolor書き込まれます16px。そして、これは完全に間違っています。プロパティはcolor継承されます。この状況でのブラウザは、次のアルゴリズムに従って動作します。
- プロパティは継承可能ですか？
ブラウザの仕組みは次のとおりです。
無効なCSS変数値が検出された場合のブラウザーの動作
▍計算中に表示される無効な値の概念
技術的な観点から、上記で説明したことは、「計算値時間では無効」と呼ばれます。このような値が表示される状況は、
var()有効なCSS変数が関数に渡されたときに発生します。その値は、そのヘルプを使用して構成されているプロパティへの書き込みには適していません。この記事
から抜粋した次の例を考えてみましょう。
.section-title {
top: 10px;
top: clamp(5px, var(--offset), 20px);
}
ブラウザが機能をサポートしていない場合、
clamp()構造で指定された値をフォールバックとして使用しますtop: 10pxか？この質問に簡単に答えるために、いいえ-それはそれを使用しません。これは、ブラウザがプロパティに書き込もうとしている無効な値を検出するまでに、カスケードスタイルの順序に従って他の値を破棄するためです。つまり、構造を単に無視しtop: 10pxます。
これがCSS仕様がそれについて言っていることです：
システムの初期段階では、他の構文エラーとは異なり、変数に関連付けられたエラーが表示されないため、計算中に無効な値が表示されるという概念が存在します。したがって、ユーザーエージェントが変数の値が正しくないことを検出すると、カスケードスタイルの順序に従って、他の値は既に破棄されていることがわかります。
その結果、CSS変数を使用して実装されたブラウザーで広くサポートされていないCSS機能を使用する場合は、ディレクティブを適用する必要があることがわかりました
@supports。これは、上記の記事で行われている方法です。
@supports (top: max(1em, 1px)) {
#toc {
top: max(0em, 11rem - var(--scrolltop) * 1px);
}
}
興味深い発見
▍変数へのURLの保存
おそらく、Webページで使用されるリソースの一部は、外部ソースからダウンロードする必要があります。このような状況では、これらのリソースのURLをCSS変数に格納できます。
:root {
--main-bg: url("https://example.com/cool-image.jpg");
}
.section {
background: var(--main-bg);
}
この時点で、
var(--main-bg)CSS関数を使用してビュー構造を処理できるかどうかという疑問が生じる可能性がありますurl()。次の例を考えてみましょう。
:root {
--main-bg: "https://example.com/cool-image.jpg";
}
.section {
background: url(var(--main-bg));
}
関数
url()は構造全体をvar(--main-bg)URLとして解釈するため、これは機能しません。これは間違っています。ブラウザが値を計算するときまでに、それはすでに正しくなく、考慮された構造は期待どおりに機能しません。
▍複数の値を保存する
複数の値をCSS変数に格納できます。これらが変数を使用する予定の場所にあるはずの値である場合、そのような構成は機能します。例を見てみましょう。
変数の値は期待どおりに見えます
。CSSは次のとおりです。
:root {
--main-color: 35, 90, 209;
}
.section-title {
color: rgba(var(--main-color), 0.75);
}
関数
rgba()とRGB値があり、コンマで区切られ、CSS変数に格納されます。これらの値は、色を指定するときに使用されます。関数を使用するこのアプローチrgba()では、開発者は色のアルファチャネルに対応する値に影響を与え、さまざまな要素の色を調整する機会があります。
このアプローチの唯一の欠点は、関数によって割り当てられた色
rgba()をブラウザ開発者ツールを使用して調整できないことです。プロジェクトで作業するときにこの機能が重要である場合、この関数を使用する上記の方法はおそらく機能しませんrgba()。
CSS変数を使用してプロパティを設定する例を次に示します
background。
: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変数の値を変更する
CSS変数に関する仕様を読んだことがあれば、そこで「アニメーションに汚染された」という用語に出くわしたかもしれません。CSS変数の値がルールのスムーズな変更に役立たないという事実を説明しています
@keyframes。例を見てみましょう。
HTMLは次のとおりです。
<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;
}
}
この場合のアニメーションはスムーズではありません。変数は、3つの値のみを取る
0、50pxと100px。 CSS仕様では、ルールで使用されるカスタムプロパティ@keyframesはアニメーションに汚染されたプロパティになり、var()要素をアニメーション化するときの関数による処理方法に影響を与えるとされています。
前の例でスムーズなアニメーションを提供する必要がある場合は、以前と同じように行う必要があります。つまり、変数を、アニメーション化する要素のCSSプロパティに置き換える必要があります。
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
→ここにありますたとえば
、私がこの記事の公開後、私がしていることを注記したい通知することを
@keyframesそれがまだ可能であるでアニメーションCSS変数は。ただし、このためには、ルールを使用して変数を登録する必要があります@property。これまでのところ、この機能はChromiumベースのブラウザでのみサポートされています。
@property --offset {
syntax: "<length-percentage>";
inherits: true;
initial-value: 0px;
}
ここでは、この機能の例を試すことができます。
▍計算
CSS変数が計算に使用できるという事実に気付いていないかもしれません。アバターについて話すときにすでに見た例を見てみましょう。
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
アバターのサイズは、変数の値によって異なります
--size。デフォルトは1です。これは、デフォルトのアバターサイズが30px*30px。であることを意味します。次のスタイルに注意してください。この変数を変更すると、アバターのサイズが変更されます。
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}
ブラウザ開発者ツールとCSS変数
さまざまなブラウザの開発者ツールを使用する場合、CSS変数の操作を簡単にするために使用できるいくつかの便利なトリックがあります。それらについて話しましょう。
▍変数を使用して定義された色の表示
CSS変数で記述された色を見ることができると便利だと思います。この機能は、ChromeおよびEdgeブラウザーで使用できます。
CSS変数によって指定された色を表示する
▍計算値
CSS変数の計算値を確認するには、ブラウザーに応じて、マウスポインターを変数の上に移動するか、特別なボタンをクリックします。
計算値の表示
Safariを除くすべてのブラウザーでは、変数にカーソルを合わせるだけで計算値を表示できます。Safariでは、これを行うには、いくつかのストライプのあるボタンをクリックする必要があります。
▍自動入力入力
大規模なプロジェクトで作業する場合、プロジェクトで使用されているすべてのCSS変数の名前を覚えておくのは困難です。ただし、Chrome、Firefox、およびEdgeで使用可能な自動完了機能を使用すると、これは問題になりません。
このメカニズムが機能するための変数名の補完-変数名の入力を開始するだけです。
▍CSS変数を無効にする
CSS変数を使用するすべての要素から無効にする必要がある場合は、CSS変数が宣言されている要素の変数の横にあるチェックボックスをオフにするだけで十分です。
CSS変数を無効にするチェックボックス
結果
CSS変数についてはかなり説明しました。今日学んだことをお役に立てば幸いです。
プロジェクトでCSS変数を使用していますか？
