お疲れ様です!るーぷの2年目(2月から3年目)コーダー、三木です。

ところで先日、Switch2が発表されました!

わが三木家は3人家族で暮らしていて、1人1台Switchがあります。

つまり、Switch2も3台買う義務が発生しているんですね。

発売日は、とりあえず今年中ということしか現時点では分かっていませんが、今から武者震いが止まらねぇよ…
あと、別の心配事があって…1店舗で3台ってこのご時世買わせてもらえるんでしょうか…?

「CSS変数」とは

さて、まずは「CSS変数」の基本的な使い方を説明いたします。

「CSS変数」の宣言

CSS

:root{
  –red: #f90000;
  –blue: #1a326f;
}

上記のように、「–変数名: 値;」の形で変数の宣言をします。(ちなみに#f90000#1a326fは色です。)
:root」はhtmlの根源的な要素になるので、「:root」で変数を宣言すれば他のどの要素でも使用することができます。

使用例は、以下になります。

実際のページ赤色青色を、CSS変数宣言します。)

CSS

:root{
  –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

:root{
  –red: #f90000;
  –blue: #3258b8;/* ←ここを変更するだけ */
}
.blue{
  color: var(–blue);/* ←変更なし */
}
.hd_contact{
  ※途中省略※
  background-color: var(–blue);/* ←変更なし */
}
#fix_sns{
  ※途中省略※
  background-color: var(–blue);/* ←変更なし */
}

結果

どうだ明るくなったろう

「:root」以外でもCSS変数宣言

さて、ここから本題に入ります。

たとえば、

この画像のようなボタンを作成したとします。コードにすると下記にようになります。

HTML

<a class=”btn_primary”>黒いボタンです</a>

CSS

.btn_primary{
  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”>黒いボタンです</a>
<a class=”btn_primary green”>緑のボタンです</a>
<a class=”btn_primary red”>赤いボタンです</a>
<a class=”btn_primary blue”>青いボタンです</a>

CSS

.btn_primary{/* ←ボタン */
  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_primary{/* ←ボタン */
  –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変数を使える場面か判断しながらコーディングしていきましょう!

メルマガ登録