cssのカスタムプロパティ、これはcssで自分で設定した変数を使いまわせるというスグレモノ。これまでsassで変数作って…てやってたのをcssだけでできるようになったのは便利ですよね。

しかも意外にめちゃくちゃ簡単に使えて、javascriptでも設定&取得できちゃうって知ってましたか？

 

ということでcssのカスタムプロパティの使い方をサクッと紹介しますね。

  1. cssで設定する方法：root
  2. cssで使う方法：var()
  3. javascriptで設定する方法：setProperty
  4. javascriptで使う方法：getPropertyValue

 

この4つをわかりやすくサクッと。さあ行きましょう。

 

①cssで設定する方法：root

まずはキホンの基本。cssでカスタムプロパティを設定（宣言）する方法を見てみますね。

 

css

:root {
    --mycolor: #454545;
}

はい、こんだけ。

ここでは「–mycolor」という変数を宣言したことになります。増やしたければここにどんどん「–myfont」とか変数を増やしていけばOK。

 

注意点：

  • ハイフン2つ「–」が絶対必要！

注意点はこれ1個。変数名の最初にハイフンが2つ絶対に必要てコト。はい、では次はcssでカスタムプロパティを使う方法を。

 

②cssで使う方法：var()

カスタムプロパティをcssで使いまわすのはvar()を使います。

 

css

color: var(--mycolor);

こんだけ！

これで「–mycolor」に設定してた「#454545」という色がcolorに設定されちゃうってわけ。めっちゃ簡単。

参考：cssのカスタムプロパティvar()の第2引数って何？

 

③javascriptで設定する方法：setProperty

はい、ではちょっと応用編。

今度はcssで使うカスタムプロパティの値をjavascriptで設定しちゃいましょう。これでjavascriptとcssの間で変数をやり取りできるようになって、なんかものすごいことができそうな感じがあります。…頭固いんであんまり思いつかないですが、なんか起こりそう！…そんな予感のやつです。

 

javascript

document.documentElement.style.setProperty( '--mycolor', '#454545');

ハイこんだけ。またまためっちゃシンプル。

「setProperty」ていうのに値を設定するだけでcss側で使えるようになります。

cssで一度宣言しないとダメ？

javascriptでカスタムプロパティを設定する際、一度cssの方でその変数名を宣言しとかなくちゃいけないのでしょうか？

これはノー。

cssであらかじめカスタムプロパティを設定してなくても、いきなりjavascriptで「setProperty」してあげればOKです。

 

④javascriptで使う方法：getPropertyValue

はい、もうカスタムプロパティ使用方法のラストに来てしまいました。すっごい楽でしたね。

最後はjavascriptでカスタムプロパティの値を取得する方法。

 

javascript

var value = document.documentElement.style.getPropertyValue('--mycolor');

 

はいこんだけ。

そもそもjavascriptで取得するならカスタムプロパティの値そのまま取得しなくても、このカスタムプロパティが有効になってる所の値取得すればいいじゃん、ということで一番使うタイミングないと思いますが一応。

 

まとめ

cssのカスタムプロパティをサクッと使えるようにわかりやすく紹介しました。

カスタムプロパティを、

  1. cssで設定する：root
  2. cssで使う：var()
  3. javascriptで設定する：setProperty
  4. javascriptで使う：getPropertyValue

 

この4つだけ押さえておけばだれでもすぐに使いこなせます。参考にしてみてくださいね。

ちなみにカスタムプロパティを使って100vhのバグを治す方法はこんな感じです。

参考：スマホで100vhが見切れる問題の解決方法3つ