CSSでスタイルを指定するときに、複数箇所で同じ値を使用することがありますよね。

この値を変更する際に、1つ1つ変更するのは面倒、と思ったことはありませんか？

CSS変数を使うことによって、複数の値を一度に編集することができるようになります。

今回は、CSS変数について詳しく知りたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSS変数が使いこなせるようになりますよ。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

CSS変数とは？

CSS変数は、カスタムプロパティとも言います。

複数の場所で使う色の値などを、あらかじめ宣言した変数に入れて置き、欲しいときに呼び出して使います。

値を定義するコードと、そこから取得するコードをそれぞれ書いていきますね。

:root {
  --main-bg-color:#66ffb2;  /* 値を定義 */
}
.sample01 {
  background: var(--main-bg-color);  /* 値を取得 */
}

各セレクタでも可能ですが、CSSの「:root」の中で宣言すると、HTML全体で使用できるようになります。

変数の先頭には「-」を2つつけ、任意の名前を定義します。上記ではカラーコードを値にしていますね。

変数を呼び出すときにはvar()を使います。

CSS変数を使う際の注意点

CSS変数を使うときの注意点を紹介します。

使い方を間違えてしまうと、機能しなかったり想定通りの表示にならなかったりするので、覚えておきましょう。

大文字と小文字が区別される

CSS変数の大文字と小文字は区別されます。

下記の2つは違うものと判断されるので気をつけてましょう。

:root {
  --bg-color: blue;
  --BG-color: orange;
}

プロパティ名には使用できない

CSS変数が使えるのは値の方のみです。

プロパティ名には使えないので、指定しないように気をつけてください。

:root {
  --bg: background-color;
}
/* プロパティ名には使えないので無効となる */
.sample {
  var(--bg): orange;
}

まとめ：CSS変数でコーディングを効率的に

今回は、CSS変数について使い方と注意点を解説してきました。

複数の場所に同じ指定をしなくて済むようになるので、コーディング作業がかなり捗るようになります。

コード管理やメンテナンスにも役立ちますよね。ぜひ活用してみてください。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP