お疲れ様です!るーぷの2年目(2月から3年目)コーダー、三木です。
ところで先日、Switch2が発表されました!
わが三木家は3人家族で暮らしていて、1人1台Switchがあります。
つまり、Switch2も3台買う義務が発生しているんですね。
発売日は、とりあえず今年中ということしか現時点では分かっていませんが、今から武者震いが止まらねぇよ…
あと、別の心配事があって…1店舗で3台ってこのご時世買わせてもらえるんでしょうか…?
「CSS変数」とは
さて、まずは「CSS変数」の基本的な使い方を説明いたします。
「CSS変数」の宣言
CSS
–red: #f90000;
–blue: #1a326f;
}
上記のように、「–変数名: 値;」の形で変数の宣言をします。(ちなみに#f90000や#1a326fは色です。)
「:root」はhtmlの根源的な要素になるので、「:root」で変数を宣言すれば他のどの要素でも使用することができます。
使用例は、以下になります。
実際のページ(赤色と青色を、CSS変数宣言します。)

CSS
–red: #f90000;
–blue: #1a326f;
}
/* class「red」の要素は赤文字に。 */
.red{
color: var(–red);
}
/* class「blue」の要素は青文字に。 */
.blue{
color: var(–blue);
}
/* ヘッダーのメールボタンを青背景に。 */
.hd_contact{
※途中省略※
background-color: var(–blue);
}
/* 右固定SNSボタンを青背景に。 */
#fix_sns{
※途中省略※
background-color: var(–blue);
}
「CSS変数」の便利な点
CSS変数の便利な点の代表といえば、例えばデザインの変更で、
「このサイト青色はもっと明るい色に変更なのかよぉ!」となった場合に
一括で変更できるという点にあります。
CSS
–red: #f90000;
–blue: #3258b8;/* ←ここを変更するだけ */
}
.blue{
color: var(–blue);/* ←変更なし */
}
.hd_contact{
※途中省略※
background-color: var(–blue);/* ←変更なし */
}
#fix_sns{
※途中省略※
background-color: var(–blue);/* ←変更なし */
}
結果

どうだ明るくなったろう
「:root」以外でもCSS変数宣言
さて、ここから本題に入ります。
たとえば、

この画像のようなボタンを作成したとします。コードにすると下記にようになります。
HTML
CSS
display: block;
font-size: 2rem;
font-weight: 700;
text-align: center;
color: #1a1a1a;/* ←黒文字 */
width: 90%;
max-width: 30rem;
padding: .5em 1.5em;
margin: 0 auto;
border: 2px solid #1a1a1a;/* ←黒枠線 */
border-radius: 2em;
background-color: #fff;/* ←白背景 */
transition: .4s;
}
.btn_primary:hover{/* ←ホバー時 */
color: #fff;/* ←白文字 */
border-color: #fff;/* ←白枠線 */
background-color: #1a1a1a;/* ←黒背景 */
}
似たような要素がたくさんあったらどうする?
ではこのボタンが、4色あったとすると、どうなるでしょうか?

まず、CSS変数を使わない場合のコードは以下です。
HTML
<a class=”btn_primary green”>緑のボタンです</a>
<a class=”btn_primary red”>赤いボタンです</a>
<a class=”btn_primary blue”>青いボタンです</a>
CSS
color: #1a1a1a;/* ←黒文字 */
border: 2px solid #1a1a1a;/* ←黒枠線 */
background-color: #fff;/* ←白背景 */
(さっきも書いたので一部割愛)
}
.btn_primary.green{/* ←緑ボタン */
color: #005625;
border-color: #005625;
}
.btn_primary.red{/* ←赤ボタン */
color: #f90000;
border-color: #f90000;
}
.btn_primary.blue{/* ←青ボタン */
color: #1a326f;
border-color: #1a326f;
}
.btn_primary:hover{/* ←ホバー時 */
color: #fff;
border-color: #fff;
background-color: #1a1a1a;
}
.btn_primary.green:hover{/* ←緑ボタンホバー */
background-color: #005625;
}
.btn_primary.red:hover{/* ←赤ボタンホバー */
background-color: #f90000;
}
.btn_primary.blue:hover{/* ←青ボタンホバー */
background-color: #1a326f;
}
「.btn_primary」とか「color」とか「border-color」とか同じ単語がいっぱい書いてあって、かなり見づらいですね。
CSS変数を使うと、コードの整理整頓に!
それではCSS変数を用いて、コードをスッキリさせましょう。
修正したコードがこちらです。
CSS
–btn_color: #1a1a1a;/* ←CSS変数を宣言(黒色) */
color: var(–btn_color);
border: 2px solid var(–btn_color);
background-color: #fff;
(一部割愛)
}
.btn_primary.green{/* ←緑ボタン */
–btn_color: #005625;/* ←変数を変更(緑色) */
}
.btn_primary.red{/* ←赤ボタン */
–btn_color: var(–red);/* ←変数を変更(赤色) */
}
.btn_primary.blue{/* ←青ボタン */
–btn_color: var(–blue);/* ←変数を変更(青色) */
}
.btn_primary:hover{/* ←ホバー時 */
color: #fff;
border-color: #fff;
background-color: var(–btn_color);
}
他色のホバーは記述しなくて良い。
いかがでしょうか?特にホバーの記述がグッと削減できました!
170文字くらいの削減になりました。
.btn_primary:hoverは、他の色は書かなくていいの?と心配になるかもしれませんが、
例えば「.btn_primary.red」は「var(–btn_color)=赤色」と宣言しなおしているため、
わざわざ.btn_primary.red:hover{ background-color: var(–btn_color);}と書く必要が無くなっているんですね。
また、せっかく「:root」で宣言した「–red: #f90000;」があるなら、上記のコードのように、
.btn_primary.red{ –btn_color: var(–red);}と書くことができます。
実際の動作がこちらです。
おしまい
いかがでしたか?
私がコーディングを覚えたての頃は、
「そのデザインに使われているカラーコードが覚えられないけど、毎回デザインをクリックして調べる手間が省けるのか〜」程度の認識で、
今回の案件のボタンの青背景色は「#1a326f」だな。文字の青も同じや!よし!
:root{–blue: #1a326f;}や!!
という具合でしかCSS変数を使用していませんでした。
今回例で出したようなボタンや、例えば
「似たような配置で文字・背景色が違うセクション」などに遭遇することもありますので、
CSS変数を使える場面か判断しながらコーディングしていきましょう!