プロのように CSS 変数を使用する方法
カスタム プロパティとも呼ばれる CSS 変数を使用すると、スタイル シートでの繰り返しを最小限に抑えることができます。これにより、デザインを変更する際の時間と労力を節約できます。また、更新が必要な値を見逃すこともありません。
DOM にアクセスすると、変数を作成して保存し、スタイル シート全体で再利用できます。
CSS 変数の定義と使用方法
スタイル シートをより整理し、保守しやすく、再利用しやすくするために、値を受け入れる任意のプロパティで CSS 変数を利用できます。
CSS 変数を使用しない HTML ファイルと CSS ファイルの例を次に示します。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
ページは次のようになります。
上記のスタイル シートで使用されている.btnクラスは動的ではないため、個々のボタンをカスタマイズするために別のクラスを作成する必要があります。美しい Web サイトを作成するには、フロントエンドのスタイルをダイナミックにする必要があります。このようにボタンを実装すると、そのタスクを達成するのが面倒になります。
ほとんどのプログラミング言語と同様に、CSS 変数を初期化して置換する必要があります。
CSS 変数を初期化するには、変数名の前にハイフンを 2 つ付けます。
:root{
/*CSS variable*/
--variable_name: value;
}
変数はどこでも初期化できますが、初期化されたセレクター内でのみその変数を使用できることに注意してください。このため、CSS 変数は通常、ルート セレクター内で初期化されます。これは、DOM の最上位の要素を対象とし、グローバル スケールで HTML ドキュメント全体から変数にアクセスできるようにします。
変数を CSS スタイルに置き換えるには、var()プロパティを使用します。
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
ルート セレクターには、 –primaryと–secondaryの 2 つの変数が含まれています。両方の変数は、それぞれ色と背景色として.btnクラスに代入されます。
変数を使用すると、個々の要素のスタイルをより簡単に設定できます。変数を再利用することで、値を 1 回すばやく変更して、すべてのインスタンスで更新することができます。
var()プロパティは、2 番目の引数を取ることもできます。この引数は、最初の引数が定義されていないか無効な状況で、最初の引数のフォールバック値として機能します。
例えば：
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
この例では、-primary変数を色スタイルに置き換えます。何らかの理由でこの値が失敗した場合、スタイル シートは 2 番目の値をフォールバックとして使用します。別の CSS 変数をフォールバック値として使用することもできます。
JavaScript による CSS 変数の操作とオーバーライド
JavaScript を使用して CSS 変数を操作することは、Web サイトのルック アンド フィールをその場で変更する強力な方法です。JavaScript を使用して、これらの変数の値を更新し、サイトに反映された変更を確認できます。
JavaScript で行われた変更は、現在のセッションにのみ適用されることに注意してください。変更を永続化するには、元のソースを更新するか、Cookie のように新しい値をクライアントに保存する必要があります。
JavaScript を使用して CSS 変数の値を更新する方法の例を次に示します。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
この JavaScript コードでは、changeColor()関数は、ユーザーが最初のボタンをクリックしたときに、最初のボタンの色を更新します。
DOM トラバーサル メソッドを使用して、HTML ドキュメントに適用されたクラスまたはセレクターにアクセスし、値を操作できます。
ボタンをクリックする前に:
ボタンをクリックした後:
JavaScript を使用して、新しい CSS 変数を作成したり、それらを完全に削除したりすることもできます。
例えば：
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
プリプロセッサでの CSS 変数の使用
フロントエンド テクノロジ内での変数の使用は、当初、SASS、LESS、Stylus などの CSS プリプロセッサで実現されていました。
CSS プリプロセッサの目的は、標準 CSS の基本的な機能を拡張するコードを開発することです。次に、ブラウザが理解できるように、そのコードを標準の CSS にコンパイルします。
CSS 変数の開発により、プリプロセッサはそれほど重要ではなくなりましたが、プロジェクトで CSS 変数と組み合わせると、まだある程度の用途を提供できます。
SASS 変数$main-colorを定義し、それを使用して CSS 変数の値を設定できます。次に、通常のスタイル クラスで CSS 変数を使用します。
SASS 関数を使用して、CSS 変数の値を操作することもできます。
例えば：
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
ここで、SASS 関数lighten()は–primaryの値を操作して–secondaryの値を取得します。
SASS 変数には JavaScript からアクセスできないことに注意してください。したがって、実行時に変数の値を操作する必要がある場合は、CSS 変数を使用する必要があります。
CSS 変数とプリプロセッサーを一緒に使用すると、ループや関数などの強力なプリプロセッサー機能や、CSS カスケードなどの CSS 変数機能を使用するなど、両方の利点を活用できます。
Web 開発で CSS 変数を使用するためのヒント
CSS 変数をより有効に活用するための重要なヒントをいくつか紹介します。
明確な命名規則から始める
変数を理解しやすく使いやすい命名規則を選択してください。たとえば、色変数には–color-、間隔変数には–spacing-などの接頭辞を使用します。
メディア クエリで変数を使用する
メディア クエリで変数を使用すると、さまざまな画面サイズに合わせてデザインを簡単に調整できます。
CSS のカスケードの性質を利用する
CSS 変数はカスケードであることに注意してください。つまり、親要素に変数を設定すると、そのすべての子に影響します。
CSS 変数は注意して使用する
あまりにも多くの CSS 変数を使用すると混乱が生じる可能性があるため、慎重に使用し、意味があり、コードの保守性が向上する場合にのみ使用してください。
変数をテストする
CSS 変数は、スタイル シート内に明確で保守しやすいコードを記述する独自の方法です。
すべてのブラウザーでまだ完全にサポートされているわけではないことに注意してください。したがって、ブラウザーの互換性について変数をテストして、変数が期待どおりに機能し、フォールバック値が期待どおりに機能することを確認する必要があります。
コメントを残す