こんにちは、ティウェブの長尾です。

CSSでコーディングをしていると、同じ値を再利用することがあります。

例えば文字色や背景色などで、複数の箇所に同じ色をカラーコードで指定していたとします。その場合、制作過程でやっぱり別の色に変更しようとなったら、適用していた箇所すべてを変更しないといけませんよね。

そんな時に便利なのがCSSカスタムプロパティです。値を「変数」として一箇所に定義しておき、複数箇所からその値を参照して利用するようにしておけば、変更の際は変数に入れていた値を修正すれば全てに反映されます。よく使用するカラーコードなどはこれを利用すると管理しやすくなります。

私は最近異業種からこの会社に転職したのですが、一人で作業していた学習時とは違い、共同作業では 再利用を考えた保守しやすいコーディングが大切だと感じました。

そこで、今回は私が実際に使ってみて便利だなと感じたこの「CSSカスタムプロパティ」についてご紹介します。

CSSカスタムプロパティ（変数）

公式では、カスケード変数のCSSカスタムプロパティ(CSS Custom Properties for Cascading Variables）とされていますが、CSS 変数やカスケード変数と呼ばれることもあります。

参照）
カスケード変数のCSSカスタムプロパティ モジュールレベル1

変数とは？

文字や数値などの値を入れることができる箱のようなもので、一度定義した変数は何度でも再利用できます。

CSSカスタムプロパティの使い方

カスタムプロパティを定義をする

特定のセレクタを対象としてスコープ（変数の有効範囲）を限定して使用することもできますが、 :root 擬似クラスに定義するとHTML文書の全体に適用することができます。
接頭辞ハイフン2つ --から始まる任意の変数名と値を宣言します。
値には文字列や単位を含む数値も指定できます。

:root {
--bg-green: #20b2aa;　/*「--bg-green」が変数名で、「#20b2aa」が値 */
--text-color: #fff;　/*「--text-color」が変数名で、「#fff」が値 */
--text-size: 20px;　/*「--text-size」が変数名で、「20px」が値 */
}

定義したカスタムプロパティを呼び出す

var関数()内にカスタムプロパティ名を記述し、定義した値を呼び出します。

<div class="example-01">CSSカスタムプロパティ</div>

.example-01 {
background-color: var(--bg-green);
color: var(--text-color);
font-size: var(--text-size);
}

「.example-01」に適用した結果

カスタムプロパティ代替値を設定する

変数を呼び出す際、 指定された変数が定義されていないときや、無効な値の場合に適用される代替値を設定しておけば、大きく崩れるような事故を防げます。

var()関数内にカスタムプロパティ名とカンマ,第2引数に代替値を設定

.example-01 {
background-color: var(--bg-green,yellow);　/*「--bg-green」が定義されていない場合は「yellow」が適用される */
color: var(--text-color,black);　/*「--text-color」が定義されていない場合は「black」が適用される */
font-size: var(--text-size,18px);　/*「--text-size」が定義されていない場合は「18px」が適用される */
}

カスタムプロパティの継承

カスタムプロパティで定義した要素の値は、子要素にも継承されます。

<div class="parent">
  <div class="child-one">child-one</div>
  <div class="child-two">child-two</div>
  <div class="child-three">child-three</div>
  <div class="child-four">child-four</div>
</div>

.parent {
--text-color: #fff;
--bg-beige: #d2b48c;
color: var(--text-color);
background-color: var(--bg-beige);
}

.child-one {
--bg-green: #20b2aa;
background-color: var(--bg-green);
}
.child-two {
--bg-salmon: #fa8072;
background-color: var(--bg-salmon);
}
.child-three {
--bg-skyblue: #87ceeb;
background-color: var(--bg-skyblue);
}

「.parent」「.child-one」 「.child-two」 「.child-three」 に適用した結果

子要素には親要素の文字色「–text-color」が継承され、4番目の子要素の「.child-four」には変数の値を指定していないため、親要素「.parent」の背景色「–bg-beige」が適用されます。

JavaScriptでカスタムプロパティを使用する

JavaScriptでカスタムプロパティの値を取得するには、window.getComputedStyleメソッドで適用したい要素のスタイルを取得し、getPropertyValue('--変数名')で値を取得します。

<div class="example-02">CSSカスタムプロパティ</div>

:root {
--bg-green: #20b2aa;
--text-color: #fff;
--text-size: 20px;
}
.example-02 {
background-color: var(--bg-green);
color: var(--text-color);
font-size: var(--text-size);
}

const textBox = document.querySelector('.example-02');
const boxStyle = window.getComputedStyle(textBox);
const boxValue = boxStyle.getPropertyValue('--bg-green');

setProperty('--変数名','値')で値を変更します

document.querySelector('.example-02').style.setProperty('--bg-green', 'salmon');

CSSで定義した「–bg-green: #20b2aa ; 」が「’salmon’」 に変更されます

「.example-02」に適用した結果

使用する上での注意点

カスタムプロパティ名は大文字と小文字で区別されます

:root {
--bg-green: green;
}
div {
background-color: var(--bg-Green);　/*「--bg-green」と「--bg-Green」は区別されるのでNG */
background-color: var(--bg-green);　/* OK */
}

値にプロパティ名を入れることはできません

:root {
--bg-color: background-color;
}
div {
background-color: var(--bg-color);　/*「background-color」 はプロパティ名なので値に入れることができません */
}

数値の値に単位がない場合は無効になります

NG例

:root {
--text-size: 20;
}
p {
font-size: var(--text-size);　/*「20」に単位がないため、無効になります */
}
p {
font-size: var(--text-size)px;　/*「var関数()」の後ろに単位を記述しても、無効になります */
}

OK例

:root {
--text-size: 20px;
}
p {
font-size: var(--text-size);
}

CSSカスタムプロパティを使ってみよう

CSSカスタムプロパティはメディアクエリ内で使用できるので、ここではcalc関数を使って、一つの変数名で3種類の可変するボタンを作成します。

①3種類のベースになるサイズを 「–base-btn」 という変数名をつけて値を100pxに設定します。

<a href="#" class="small-btn">Small</a>
<a href="#" class="medium-btn">Medium</a>
<a href="#" class="large-btn">Large</a>

:root {
--base-btn: 100px;
--bg-skyblue: #87ceeb;
--text-color: #fff;
--radius-size: 50px;
}

②「.small-btn」「.medium-btn」「.large-btn」の横幅を var(--base-btn);で設定します。

③calc関数で「.medium-btn」を1.5倍に、「.large-btn」を2倍に設定します。

.small-btn {
width: var(--base-btn);
}
.medium-btn {
width: calc(var(--base-btn) * 1.5);
}
.large-btn {
width: calc(var(--base-btn) * 2);
}
.small-btn,.medium-btn,.large-btn {
background-color: var(--bg-skyblue);
color: var(--text-color);
border-radius: var(--radius-size);
}

④ここで3種類のサイズのボタンが完成しましたが、ブレイクポイントに合わせて可変するようにしたいので、960px以上では「–base-btn」の値を200pxに設定します。

@media screen and (min-width: 960px) {
:root {
--base-btn: 200px;
}

「.small-btn」「.medium-btn」「.large-btn」に適用した結果

960px未満では100pxの幅をベースに、100px、150px、200pxのボタンが、960px以上では200pxをベースにした200px、300px、400pxのボタンができました。

値を変更したいときは、「–base-btn」の値を2か所変更すればよいので、記述ミスなども減らすことができます。
また、変数名を使用することにより数値に意味づけができるので、参照しているものをイメージしやすくなるというメリットもあります。

まとめ

プログラミングの経験がある方は、「CSSでも変数が使えるんだなあ」と思われたのではないでしょうか。 逆に、プログラミング未経験の方は慣れるまでイメージしにくいかもしれません。

CSSカスタムプロパティは、再利用や複数個所での修正が簡単になり、変数名に意味的な識別を持たせることで視認性が上がるので、効率よくコーディングができる点がメリットとして挙げられます。

ただしそのメリットを十分に享受するためには、CSS全体の設計と変数名の付け方をあらかじめ意識しておく必要があります。

デメリットは、例えば古いブラウザや特殊なブラウザなどでカスタムプロパティがサポートされていない可能性が挙げられますが、そのような場合に備えて適用される代替値を設定しておけば値が参照されないということもないため、大きなデメリットにはならないでしょう。

いかがでしょうか。この記事で、ウェブ制作に携わる方や勉強をされている方のお役に立てれば幸いです。
最後までお読みいただきありがとうございました。