CSS変数とは何ですか?それらの使用方法
公開: 2022-02-16サイトのCSSコードを作成するときは、CSSカスタムプロパティ(変数)を利用して開発プロセスをスピードアップできます。 変数を使用してプロパティ(サイズ、色)を定義し、それを複数の要素に適用できます。
そうすれば、コードとデザインをより細かく制御することができます。 変数の値を1つの場所で変更すると、呼び出されるすべての場所でそのプロパティの値が上書きされます。
この投稿では、CSS変数といくつかの実用的なアプリケーションの使用方法について説明します。
はじめましょう!
変数の宣言
変数は、グローバルスコープまたはローカルスコープを持つことができます。 変数をグローバルに定義するには、:rootセレクターを使用します。
:root { --base-font-size: 1.1rem; }
:root { --base-font-size: 1.1rem; }
:rootセレクターは、ドキュメントのルート、つまり特定の場合は<html>と一致します。
CSSカスタムプロパティ(変数)を宣言するには、2つのダッシュ(-)から始めます。 変数では大文字と小文字が区別されます。次に例を示します。
--base-font-sizeと--Base-Font-Sizeは2つの異なる変数です。
変数をローカルで定義するには、変数を使用する要素のセレクターを使用します。
#first-container { --background: #ccc; }
#first-container { --background: #ccc; }
変数を定義したら、それを呼び出す必要があります。
var()関数
var()関数は、定義されたCSS変数の値を挿入するために使用されます。 関数はそれ自体を変数の値に置き換えます。 例を見てみましょう:
HTMLコード
- このコードをコピーしてコードエディタに貼り付けます。
- ファイルをindex.htmlとして保存します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
CSSコード
- style.cssというファイルを作成します( index.htmlの同じディレクトリに)。
- 以下のコードを貼り付けてファイルを保存します。
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; }
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; }

ここで注意すべきことがいくつかあります。
- カラーパレットの作成は簡単なプロセスです。
- 境界変数の定義の色のように、別の変数の定義内で変数を使用することができます。
- 変数は継承され、.container- *要素のcolorプロパティはその直接の子に影響します。 この場合、<p>要素。
変数をオーバーライドするには、コンテナー内で変数を宣言して、より具体的にします。
- CSSコードを編集します。
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
変数とメディアクエリ
変数は、CSSメディアクエリで継承およびオーバーライドすることもできます。
- このコードを変数に追加します。
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
ラッパー要素のベース幅を定義しました。 これで、これらの変数を.wrapperwidthプロパティに適用できます。
- このコードをCSSファイルの最後に追加します。
.wrapper { width: var(--wrapper-width);
margin: 0 auto; }
.wrapper { width: var(--wrapper-width);
margin: 0 auto; }
画面幅が1100px未満のデバイスのメディアクエリを定義するには、次のメディアクエリを記述します。
- CSSコードを編集します。
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
メディアクエリ内の新しい変数定義は、その値を上書きします。 また、変数はDOMで使用可能であることに注意してください。つまり、JSを使用して変数を取得および操作できます。 これは、CSSプリプロセッサ内の変数では不可能です。
概要
変数は、少量および大量のCSSを整理および管理するのに役立ちます。 それらは繰り返しを減らし、したがって間違いを防ぎます。 CSS変数は動的です。つまり、実行時に変更できます。 CSS変数を使用してサイトまたはアプリケーションに動的にテーマを設定するのは簡単です。 これらは、カスタマイズされた名前でCSSプロパティに値を割り当てる機能を提供します。 変数は標準のカスケード規則に従うため、異なる特異性レベルで同じプロパティを定義することができます。
このチュートリアルが気に入っていただけたでしょうか。 読んでくれてありがとう!