CSSでカスタムプロパティ(変数)を使う方法

2021年3月10日2021年6月1日

今回の記事ではCSSでカスタムプロパティ(変数)を使う方法についてを解説します。

カスタムプロパティ(変数)を使えば、例えばメインカラーやサブカラーなどといったよく使うものを変数に格納することで使い回すことができるようになり、また変数の値の変更も手軽にできるのでとても便利です。

カスタムプロパティ(変数)の使い方

それではカスタムプロパティの基本的な使い方について解説します。

まず初めに、変数を使うには変数の宣言(この変数にはこの値を格納します!といった宣言。)をしなければなりません。

変数の宣言の仕方は簡単で、先頭に-(ハイフン)を2つ付け、その後ろに自分の好きな名前・文字列を記述した後、CSSを指定するときと同様に:(コロン)で区切りプロパティの値を記述すればOKです。

そして変数の宣言をする場所に関しては、各セレクターの中に宣言をした場合はそのセレクターの中だけで使える変数(ローカル変数)とすることができ、擬似クラス:root内に宣言をした場合は全てのセレクターの中で使える変数(グローバル変数)にすることができます。

ただし、実際にはローカル変数で使うことはほとんどなく、後者のグローバル変数として使うことの方が多いと思います。

ローカル変数を宣言する方法

.sample{
  --main-color: blue;
}

※補足
上の場合は、.sample{}の{}の中だけmain-colorという名の変数が呼び出せます。(ローカル変数)

グローバル変数を宣言する方法

:root{
  --main-color: blue;
}

※補足
上の場合は、全てのセレクターでmain-colorという名の変数が呼び出せます。(グローバル変数)

そして、次に宣言をした変数を呼び出す方法ですが、宣言をした変数を呼び出すにはvar()と書いて()の中に-(ハイフン)を2つと、続けて変数名を書きます。

ローカル変数を呼び出す方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS変数</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1 class="sample">ここにテキストが入ります。</h1>
</body>
</html>

.sample{
  --main-color:blue;
  background-color: var(--main-color);
}

グローバル変数を呼び出す方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS変数</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>ここにテキストが入ります。</h1>
  <h2>ここにテキストが入ります。</h2>
  <h3>ここにテキストが入ります。</h3>
</body>
</html>

:root{
  --main-color: blue;
  --sub-color: red;
  --third-color: yellow;
}

h1{
  background-color: var(--main-color);
}

h2{
  background-color: var(--sub-color);
}

h3{
  background-color: var(--third-color);
}

カスタムプロパティ(変数)とメディアクエリ

CSSのカスタムプロパティ(変数)では、1度格納した値をウィンドウ幅に合わせて変更することができます。

ウィンドウ幅に合わせてカスタムプロパティ(変数)の値を変更する方法は簡単で、メディアクエリの記述の中で、もう1度変数の宣言を行えばいいです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS変数</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>ここにテキストが入ります。</h1>
</body>
</html>

:root{
  --main-color: blue;
}

h1{
  background-color: var(--main-color);
}

@media screen and (max-width:800px) { 
  /*　ウィンドウ幅が800pxより狭い場合はここを読み込む　*/
  :root{
    --main-color: red;
  } 
}