CSSの基本
schedule2022.10.23

カスタムプロパティ（変数）で繰り返し利用する値の登録

CSS

CSSを使っている時にとても困るのが同じ値を何度も使うことです。例えばリンクの色などでメインのカラーを決めている場合、ページの要所要所でリンク色を設定し直すことがあります。そんな時にカラーコードはなんだっけ？と探す手間が発生します。もし修正する場合は全ての該当箇所を修正する手間も発生します。

CSSにはカスタムプロパティ（CSS 変数やカスケード変数とも呼ばれるようです）を設定することができます。このカスタムプロパティはプログラムで言うところの変数です。特定のキーワードに値を入れることで繰り返し使えるようになります。そのキーワードの値を変えれば全てのCSSプロパティの値も変更してくれるので非常に便利な機能です。

カスタムプロパティの使い方

変数登録

使い方は非常に簡単です。変数の登録方法は下記の様にします。

セレクタ {
    --好きな文字:値;
}

これで--○○という変数が作られます。一度宣言すれば指定したセレクタ内なら自由に使うことができます。

:root擬似クラスに登録すればページ全体で使える

div{ --main-color : red }のようにすると<div>以下のセレクタで--main-colorが利用できるようになります。もしページ全体で利用したい場合は:root擬似クラスにセットします。この:rootとはページの一番上の階層を示します。通常のページなら<html>と同等の意味です。

:root{
  --main-color : red;
  --main-subColer : green;
  --main-font-size : 20px;
  --main-margin-bottom : 40px;
}

変数の使い方

実際に値をCSSプロパティにセットするにはvar(--○○)と記述します。

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

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

a:hover{
    color:var(--main-color);
}

このようにCSSの始めに:rootでカスタムプロパティを作っておけばコーディングが非常に楽になります。名前は--さえ先頭に付けておけば自由に決められるのでわかりやすい名称にしましょう。