[超便利!] CSSの変数の使い方まとめ

CSS

こんにちは! 日々CSSで勉強したことをまとめています。

今回の記事では、cssの変数の使い方をまとめています。

使えるようになると便利なので、一緒に確認しましょう〜!

cssの変数とは

cssの変数は簡単にいうと、

一度名前をつけて作っておくと、その名前で何回でも簡単に呼び出せるもの

です。

例えば、

  • buttonColor(変数) -> 青
  • mainTextColor(変数名) -> グレー

など指定しておけば、

buttonColorやmainTextColorという名前で色の指定が行えます。

cssの変数の書き方

:rootでくくってあげて、変数名の前に — をつけるのがルールです。

では実際に使ってみましょう。

■HTMLファイル(index.html)

■CSSファイル(main.css)

このコードをブラウザで見ると、

こんな感じになります。

まとめると、

  • –netflix-color: #e50914; で変数を作成
  • var(–netflix-color); で変数を利用

です。

CSSの使い方は簡単ですね! 


CSSの変数を使う理由は?

ここまででCSSの変数の使い方をまとめてきました。

ここで1つ疑問が出てくるかもしてません(私は最初思いました。。)

別に色指定くらい、毎回すればよくない?

ってことです。

これに対して、私なりの考えは、

  • コードの可読性(読みやすさ)を高められる

という利点があると思っています。

今回上のサンプルはコード量が少なく、あまり利点を感じられないかもしれません。

ただ、

  • 複数人で開発を行う
  • コード量がめちゃくちゃ多い

このようなケースの場合、毎回色など指定するのではなく、

名前をつけてあげて変数を作っておくことで、

圧倒的にコードが読みやすくなると思います。

まとめ: CSSの変数は積極的に使いたい

以上です!

今回はCSSの変数の使い方と使う意味に焦点をおきまとまてみました。

本ブログでは他にもチュートリアル記事など書いているので、ぜひ参考にしてみてください!

参考:

・CSS Variables(カスタムプロパティ)でCSSがより便利に!

・CSSでも手軽に変数を扱えるようになったCSS Variables(カスタムプロパティ)を使う