メニューを閉じる

テクノモバイルグループ

メニューを開く

2017.11.20

プログラミング

css変数って便利

こんにちは、新卒のshiroです。
という一文(shiroを除く)がお決まりの文言として打ちすぎたのか、予測変換で出てくるようになっていました。

今回はcss変数を触ってみた感想です。
css variablesとか、css custom propertiesとか、なんだか呼ばれ方が統一されていない複数あるやつです。
公式では「CSS Custom Properties for Cascading Variables」ですかね。
以降はcss変数で統一します。

存在だけは知っていて、実際触ってみたら便利だなぁ……と思ったので記事にしてみた次第です。

さて、前置きが長くなりました。
ここから本題です。

css変数の書き方

css変数は文字通り、css内で扱える変数のことです。
初期化はcss内で行えますが、変更はjavascriptで行います。
Can I useによると、下図のとおり主要ブラウザの現行バージョンではほぼ全て対応しています。
2017-10-26_11h05_39

基本的な構文は以下の通り。

任意のプロパティ名の前に「–(ハイフン2つ)」を付けて指定するだけです。
valueは普段通り設定する値を入力します。
意外と簡単ですね。

グローバル変数のように扱いたければ

と書けばいいです。

実際に使用してみます。
例えば

とcss変数を設定したとし、

と記述すると、.sample_box内の背景色が–sample-colorで設定した値になります。
上記の様に、valueにcss変数を指定する際はvar()内に変数名を記述します。

また、varには以下の様に第二引数を指定することができます。

このようにすることで、–sample-colorを取得できなかった際に第二引数の値が適用されます。

複数個所で同じ色を指定する際、それぞれに直接書いていると修正が大変ですが、css変数を使用して記述すると1箇所の修正で全てに反映されます。
複数個所に同じ値を入れることがわかっている場合や、同じ値を指定する箇所が予想よりも多くなってきた際、css変数を利用してみることをおすすめします。

css変数の動的な変更

css変数の変更にはjavascriptを使用します。

まず、大事なこと。
下記のようなjqueryの記法では変更できません!

これで変更しようとして見事にハマりました……。

ですので、javascriptのstyle.setProperty()を使用して変更します。
ですが毎回document…と書いていくのは大変なので、下記の様に変更用関数を用意しました。

上記の引数にセレクタ、プロパティ名、値を入れればガリっと書き換えてくれる簡単なものです。
今気づきましたが、この関数setProperty()は名前を変えた方がいいですね。
それはさておき、:root内で設定している場合、document.documentElementに行かないといけないので、それ用にif文を入れています。

後は任意の場所で

と書けば、–sample-colorを使用している箇所全体の色が変わります。

簡単ですね!

作成したレイアウトの背景色と文字色の兼ね合いを調べるときにinputでcolorを選択できるようにして、change()をトリガーに変更する、という方法で使えそうですね。

今回は色に注目して紹介しましたが、もちろんボーダーの太さなども設定できます。

快適なレイアウトライフを!

EOF.


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE