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

今回の記事では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;
  } 
}

これでウィンドウ幅が800pxより狭くなると、変数main-colorに格納されている値がblueからredに変更することができました。

カスタムプロパティ(変数)の対応ブラウザについて

CSSのカスタムプロパティ(変数)は現段階ではInternet Explorer11には対応していません

ただし、その他のモダンブラウザではほとんど対応しています。

詳しい対応ブラウザに関して知りたい方は以下のリンクを参照下さい。

CSSカスタムプロパティの対応ブラウザーについてはこちら

まとめ

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

カスタムプロパティ(変数)が使えるようになればCSSが非常に効率化するので、まだ使っていなかった人はこれから是非導入してみると良いかと思います。

最後までご覧頂き、ありがとうございます!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる