【CSS】変数の便利な使い方を基礎から紹介！注意点も解説
CSSでスタイルを指定するときに、複数箇所で同じ値を使用することがありますよね。
この値を変更する際に、1つ1つ変更するのは面倒、と思ったことはありませんか？
CSS変数を使うことによって、複数の値を一度に編集することができるようになります。
今回は、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変数について使い方と注意点を解説してきました。
複数の場所に同じ指定をしなくて済むようになるので、コーディング作業がかなり捗るようになります。
コード管理やメンテナンスにも役立ちますよね。ぜひ活用してみてください。
今回の記事が参考になれば幸いです。
