どうも!LSSです!!
現在のCSSには「変数」の概念があります。
「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。
…実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^;
CSS変数とは
基本的な使い方を簡潔に書くと、例えば
width:100px;
という指定をかけたりする際に、
--w1:100px;
width:var(--w1);
みたいな書き方でも、同じ結果になります。
※「w1」は任意の変数名です。
--w1:100px;で「--w1」という変数(箱、と思ってもらってもOK)に「100px」という値を用意しておいて、
width:var(--w1);で「--w1」に格納しておいた値を取り出し、widthプロパティに設定する…事で、
width:100px;と書いたのと同じ事になります。
使用するメリットは…例えば、ページ内で何回も、サイズを「100px」で統一して指定していたものがあって、それを「やっぱり110pxにしよう」と思った時…CSSのコード内に何回も出てきている「100px」を全部「110px」に書き換える…となると邪魔くさいですよねw
そんな時、最初から、冒頭で
--w1:100px;
と定義しておき、使用箇所ごとに
width:var(--w1);
のように書いておけば、冒頭の「--w1:100px;」を変更するだけで、がらっと変更できます^^
サイズだけではなく、色指定も変数に格納できるので、たくさんの箇所に書いた色指定も一括修正できる、というメリットがありますね。
変数じゃなくて定数では?
プログラミングで変数を使いたおしていた自分がこの「CSS変数」に触れるに当たり…まっさきに思ったのは、
「これ、変数じゃなくて定数じゃね?」
でしたw
プログラムで使う変数は、例えばゲームのスコアを入れて置く変数だと、ゲーム開始時に、
score=0
のように初期値を代入しておいて、条件を満たした時に、
score=score+100
とするとscoreという変数の値が、元の値に+100された数値で上書きされるようなもの…つまり「変化する数だから『変数』」という認識でした。
プログラム言語で使う「変数」ほどの自由度はなさそう…だけど、うまく使えばCSSの融通が利かない部分を大きく補ってくれるのが「CSS変数」かな?と認識しています。
CSS変数を変数的に扱えるかも!?
こないだの記事、
で、「ラジオボタンを使えば、複数の候補から適用するCSSプロパティを選択できそう!」という事に気づきました。
限定的ではあれ、JavaScriptで作っていたコード生成ツールをCSSだけでできるかも?という事を考えていた時に、
「これとCSS変数を組み合わせたら、変数らしい使い方ができるのかも?」
と思ったので、それを実験してみます!
コード
<style><!--
#m1{
border:3px solid pink;
width:var(--test);
height:var(--test);
}
#c1:checked~#m1{--test:120px;}
#c2:checked~#m1{--test:160px;}
#c3:checked~#m1{--test:240px;}
#c4:checked~#m1{--test:300px;}
--></style>
<div>
<h2 class="stk2">実験!!</h2>
<div>
<input id="c1" name="r1" type="radio" />
<input id="c2" checked="checked" name="r1" type="radio" />
<input id="c3" name="r1" type="radio" />
<input id="c4" name="r1" type="radio" />
<div id="m1">ラジオボタンでサイズが変わります</div>
</div>
うまくいきました^^
CSS変数「--test」に値を設定しているのは、
「ラジオボタンが選択された時のid="m1"な要素への指定」
ですが、それと別に書いたへid="m1"の指定でを「--test」をvarで参照しています。(参照部分の方がコード上 先に書いていますが、それでも反映されるようですね)
…なにげに、初めてCSS変数を使ってみましたが、すんなり動いてくれました^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^