Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】試しに、CSS変数とラジオボタンを使ってみました【実験】

 どうも!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変数を使ってみましたが、すんなり動いてくれました^^

 

 

  

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^