CSSの変数、カスタムプロパティ
たまです。
Webアプリケーション製作に伴い、Webのコーディングについて教える機会がありました。
今回は、普段はアプリケーション製作などに関わっている方でも、意外と知らないカスタムプロパティについてご紹介します。
カスタムプロパティとはCSS変数やカスケード変数とも呼ばれることがあり、全体の色の設定を管理するために使われます。
Webページの製作やWebアプリケーションの製作では複数の画面を管理するため、時に膨大な量のCSSを書くことになります。複数のファイルに分けて書くことも多く、同じ色を効率的に使ったり、漏れなく変更したりするのは大変です。昔は一括返還などで対応していましたが、コード量が多くファイルが複数ある場合は見落としの危険もありますよね。そんなときに威力を発揮するのがカスタムプロパティです。
基本的な書き方は下記の通りです。
———————————————————-
element{
— 変数名 : 値 ;
}
———————————————————-
よく使われるのは、:rootの疑似クラスで定義し、HTML文書の全体に適用する使い方です。
下記では色を定義していますが、単位のついた値や文字列も設定が可能です。
———————————————————-
:root {
–main-bg-color: #8ed1fc;
}
———————————————————-
h1{
background-color: var(–main-bg-color);
}
button{
background-color: var(–main-bg-color);
}
———————————————————-
CSS内では、var(変数名)で指定すると、値が反映します。
このように記載することで、まとめて定義しているカスタムプロパティを変更するだけで上記のように同じ変数の値を指定している箇所をまとめて変更することが可能です。
カスタムプロパティはcssファイルが分かれていても、先に読み込まれるcssファイルに書かれていれば、他のファイルからも呼び出すことが可能です。
基本仕様を反映するcssファイルにカスタムプロパティで書けば、簡単に管理することができますよね。
AppSelectでは、このカスタムプロパティを利用することで、アプリケーションの色設定をオーナーが簡単に変更できるようにしています。
カラーセットを作ってあるので、イメージに合わせた組み合わせを選ぶだけ。
内部の処理としてはカスタムプロパティの値を変更するだけなので、製作やカスタムの際の管理がしやすくなっています。