「変数（カスタムプロパティ）」を利用したCSSの書き方

WEBデザイナーによっては「コーディング」は「デザイン制作より難しい」と感じている人もいるのではないでしょうか。

「CSSプロパティ」もどんどん新しいものが増えていき、何をどう使えばいいのかを考える時間も増えていきます。

今回は「変数」を利用した「CSSの書き方」をご紹介していきたいと思います。

「変数」を利用しないCSSコード

まず、初めに「変数」を使わないで「CSS」を書いていきたいと思います。

今回は、「業績（売上）グラフ」をテーマにしていきます。

完成形は下記のようになります。

HTMLは下記のように作成をしました。

<section class="sales-rate">
    <ul class="stores-list">
        <li>A店</li>
        <li>B店</li>
        <li>C店</li>
        <li>D店</li>
        <li>F店</li>
    </ul>
</section>

CSSは下記のようになります。

.sales-rate {
    width: 50%;
    margin: 0 auto 50px auto;
    padding: 20px;
    border: solid 1px #ddd;
}

.stores-list {
    list-style: none;
    padding: 0;
}

.stores-list li {
    width: 100%;
    background-color: #ddd;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

「グラフの長さ」を変える

「グラフの長さ」がすべて同じのため、店舗ごとにグラフの長さを変えてみたいと思います。

「A店～E店」のグラフの長さを下記のように変えてみました。

CSSは下記のように作成をしました。

.sales-rate {
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border: solid 1px #ddd;
}

.stores-list {
    list-style: none;
    padding: 0;
}

.stores-list li {
    width: 100%;
    background-color: #ddd;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

.stores-list li:nth-child(1) {
    width: 30%;
}

.stores-list li:nth-child(2) {
    width: 50%;
}

.stores-list li:nth-child(3) {
    width: 70%;
}

.stores-list li:nth-child(4) {
    width: 100%;
}

.stores-list li:nth-child(5) {
    width: 20%;
}

「:nth-child」疑似クラスでそれぞれの要素の長さを変更しています。

「変数」を利用したCSSコード

「CSSの変数」は下記のように定義します。

--変数名:変数の値;

例えば、

--myColor:blue;

のようになります。

「変数」の利用方法

先ほどの「店舗別売上高」の「グラフの長さ」を変数で変えてみたいと思います。

CSSは下記のように作成してみました。

:root {
    --store-a: 30%;
    --store-b: 50%;
    --store-c: 70%;
    --store-d: 100%;
    --store-e: 20%;
}

.sales-rate3 {
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border: solid 1px #ddd;
}

.stores-list3 {
    list-style: none;
    padding: 0;
}

.stores-list3 li {
    width: 100%;
    background-color: #ddd;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

.stores-list3 li:nth-child(1) {
    width: var(--store-a);
}

.stores-list3 li:nth-child(2) {
    width: var(--store-b);
}

.stores-list3 li:nth-child(3) {
    width: var(--store-c);
}

.stores-list3 li:nth-child(4) {
    width: var(--store-d);
}

.stores-list3 li:nth-child(5) {
    width: var(--store-e);
}

CSS変数を使いたい部分で、

var(変数名）

を入力することで、「変数の値」を利用することができます。

変数は、

:root {
    --store-a: 30%;
    --store-b: 50%;
    --store-c: 70%;
    --store-d: 100%;
    --store-e: 20%;
}

このコードの「:root」は、「HTML要素」ですが、このように「疑似クラス」を利用して「HTML要素」を指定することもできます。

それぞれの「グラフの長さ」を変えたい時は、この「変数の値」を変えるだけでいいため、「値の変更」が行いやすくなるメリットがあります。

CSSの変数をHTMLに埋め込む

CSSに定義した変数はHTMLの「style属性」で埋め込むこともできます。

例えば、1ページに100店舗分のグラフを表示しようとすると、100個の変数をCSSに書いていく必要があります。

HTMLの「style属性」に埋め込むことで、HTML要素の定義とCSSの変数の定義を同時に行うことができます。

書式は下記のようになります。

:root
<タグ名 style="--変数名:変数の値">表示内容</タグ名>

のようになります。

先ほどのコードをこの形式で作成すると、

<div class="sales-rate2">
    <ul class="stores-list2">
        <li style="--num:30%">A店</li>
        <li style="--num:50%">B店</li>
        <li style="--num:70%">C店</li>
        <li style="--num:100%">D店</li>
        <li style="--num:20%">F店</li>
    </ul>
</div>

のようになります。

CSSも変更が必要になります。

CSSは、

.stores-list li {
    width: var(--num);
    background-color: #ddd;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

のように、「widthプロパティ」の値をCSSの変数に変更しています。

このように作成をすると、「style属性」でCSSの変数を作成しているため、コードを初めて見た方はどこに変数の内容が定義されているのかがわかりません。

そのため、「コードの可読性」の低下を招く可能性もありますので、利用する際には検討が必要かもしれません。

「CSS変数」を利用した際に「運用・保守がしやすいか？」を考える習慣を身に付けることも大切です。

さまざまなシーンで活用しながら「CSS変数」のより良い活用方法を探してみてください。