【CSS】変数の便利な使い方を基礎から紹介!注意点も解説

公開日: 2022.01.31
更新日: 2024.01.03
変数の便利な使い方を基礎から紹介

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

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

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

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

  • CSS変数とは
  • 使う際の注意点について

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

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

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5