【Advance】CSS変数の活用例

CSS変数（カスタムプロパティ）はカラーコードだけでなく、数値でも文字列でも、何でも登録することが出来ます。
極端な話、プロパティ値として使えない文言でも登録自体は可能。

以下では、CSS変数を使うことで得られる恩恵が大きいものを3つ紹介します。

1. サイズ・余白にCSS変数を使う

◆ calc()と併用する

2. 長いプロパティ値の単純化に使う

◆フォント指定
◆その他

3. カラー管理・設定に使う

◆複数のCSS変数でカラーバリエーションを作る

ZooloppaでCSS変数を使ってみる

1. サイズ・余白にCSS変数を使う

CSS変数を活用しやすいものとして、コンテンツ幅や余白などのサイズ指定が挙げられます。
変数の定義・呼び出し方は、基本書式通りでOK。

ただし、シンプルに変数を呼び出す場合、var(--変数名) の後ろに px や % などの単位を足しても無効になります。
決まった単位が必要な場合は、変数の定義時に“単位付き”にしておくのが確実。

sample.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    :root {
      --color_main: #669900;
      --w_content: 1200px;
      box-sizing: border-box;
    }

    .bg-main {
      background-color: var(--color_main);
    }

    .box{
      max-width: var(--w_content);
    }
  </style>
</head>
<body>
  <div class="box bg-main">
    <p>
      test
    </p>
  </div>
</body>
</html>

また、CSS変数は呼び出すだけではなく、上書きも可能でした。
この性質を活かして、以下のようにクラスごとにCSS変数を上書きすることも出来ます。

以下のCSSでは、変数を使ってpaddingとfont-sizeを設定しています。
変数の値を上書きすると、それに合わせてpaddingとfont-sizeが変わります。

:root {
    --color_accent: #F15A24; /* 橙 */
}
.btn{
    --btn_unit: 1rem;
    display: inline-block;
    padding: var(--btn_unit);
    background-color: var(--color_accent);
    font-size: var(--btn_unit);
    color: #FFF;
}
.btn-sm{
    --btn_unit: 0.8rem;
}
.btn-lg{
    --btn_unit: 1.4rem;
}

<div class="btn">ボタン</div>
<div class="btn btn-sm">ボタンSmall</div>
<div class="btn btn-lg">ボタンLarge</div>

検証ツールで見ると、変数が上書きされていることがわかります。

◆ calc()と併用する

CSS変数は、CSS関数calc()と組み合わせて使うことも出来ます。
calc()は、13.最終調整のレッスンで簡単にご紹介した、()の中で四則演算ができる関数。
これとCSS変数と組み合わせて、変数で設定した値を元に計算ができるわけです。

例えば、先程のボタン。
paddingを以下のように書くと、上下と左右で別の大きさにできます。

.btn{
    --btn_unit: 1rem;
    display: inline-block;
    padding: calc( var(--btn_unit) /2 )  var(--btn_unit) );
    ...

上下paddingは--btn_unitの半分、左右paddingは--btn_unitと同じ値が設定されます。
1rem=16pxなら「padding : 8px 16px; 」と書いた状態です。

btn-smやbtn-lgクラスでは--btn_unitの値を変更しました。

.btn{
    --btn_unit: 1rem;
    display: inline-block;
    padding: calc( var(--btn_unit) /2 )  var(--btn_unit) );
    background-color: var(--color_accent);
    font-size: var(--btn_unit);
    color: #FFF;
}
.btn-sm{
    --btn_unit: 0.8rem;
}
.btn-lg{
    --btn_unit: 1.4rem;
}

それぞれのクラスでは変更した--btn_unitの値に合わせて、上下paddingと左右paddingも変わります。
縦横のバランスを保ったまま、自動的に余白（padding）が変わってくれるのです。

また、先ほど「シンプルに変数を呼び出す場合は単位が必要」と紹介しました。
CSS変数の方に単位が入っていない場合、calc()関数と組み合わせることで、単位を付け足してプロパティ値として使うことも可能です。

:root {
    --w_content: 1200;
}

.box{
    max-width: calc( var(--w_content) * 1px );
}

こうすれば使うには使えますが、1200は“px”単位以外で使わないですよね。
単位が固定であれば、単位込みで変数にしたほうがシンプルで良いと思います。

2. 長いプロパティ値の単純化に使う

CSSプロパティの値が長くなってしまう場合に、分かりやすいようにCSS変数を使うこともあります。
代表的なものとして、フォントファミリーの指定などがあります。

◆フォント指定

サイトで使用するフォント指定をCSS変数として使います。
見出しの一部分だけ・数字だけなど部分的にフォントを変えたい場合や、多言語対応のWebサイトを作る時にも役立つかもしれません。

簡単なコードで試してみましょう。

sample2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォント</title>
  <style>
    :root{
      font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    }
    h1{
      font-size: 36px;
    }
    .num{
      font-size: 1.25em;
      padding-right: 0.25em;
    }
  </style>
</head>
<body>
  <h1>
    CSS Variables
  </h1>
  <p>
    CSS変数を使ってみるテストです
  </p>
  <h2>
    <span class="num">1.</span>CSS変数とは
  </h2>
  <p>
    CSS変数は、CSSのプロパティ値に好きな名前をつけて呼び出せる機能です。
  </p>
</body>
</html>

このページで、H1とH2の数字部分（numクラス）だけフォントを変えたいとします。
わかりやすように、特徴的なGoogleFont“Lobster”で試してみます。

Lobster - Google Fonts

まず、フォントファミリーの値それぞれに変数名をつけます。
font-familyプロパティの値としては、作成した変数を使います。
総称フォント「sans-serif」は最後に書いて、最低でもゴシック体表示にします。

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
:root {
    --ff-default: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo";
    --ff-graphical: "Lobster";
    font-family: var(--ff-default), sans-serif;
}
h1{
    font-family: var(--ff-graphical), sans-serif;
    font-size: 36px;

}
.num{
    font-family: var(--ff-graphical), sans-serif;
    font-size: 1.25em;
    padding-right: 0.25em;
}

ただ、この書き方だと、何らかの問題でGoogleフォントが読み込めない時に、h1と.numはOS/ブラウザ標準のゴシック体で表示されます。
sans-serifを入れずfont-family: var(--ff-graphical) ;と書いた場合はOS/ブラウザ標準フォントです。
これは変数を使っていない場合も同様です。

Webフォントが使えない時の備えに「最低限、周囲から浮かないフォント」を設定したい場合は、"Lobster"の後に第二候補、第三候補...とフォントを書いていく必要があります。

今回のようにCSS変数を使っていれば、以下のように書くだけでOK。
見た目（変数名）でも「特殊なフォントがあって、使えなかったらサイトデフォルトのフォントにする」ということがわかります。

h1{
    font-family: var(--ff-graphical), var(--ff-default), sans-serif;
}

ちなみに、CSS変数を使わずに書くと、以下のように長くなります。

h1{
    font-family: "Lobster", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

CSS変数で書いたものと比べると、わかりやすさでも劣るのではないでしょうか。

◆その他

フォント指定に限らず、ずらっと書くと長いし分かりにくい！という指定は結構ありますよね。

グラデーションや、ショートハンド系プロパティ（ドロップシャドウのbox-shadow:や、アニメーション関連のanimation: transition:などで、CSS変数を活用してコンパクトにまとめる・バリエーションを明確にする方もいらっしゃいます。

3. カラー管理・設定に使う

CSS変数を使って、使用するカラーを管理することも多いです。

あらかじめ使用するカラーを--color_mainなどの変数にしておきます。
そして、要素・クラスなどに対する色の指定では変数を使います。
そうすることで、変更があっても変数定義を書き換えるだけで全てに反映されます。

前回のレッスンで、Zooloppaを使って行った色の置き換えもこれに近いですね。

ただし、CSS変数を使ってのカラー管理は、UIのようにデザインの統一性が高いものに向いています。
“一度しか使わないカラー”が頻出する、統一性の低いデザインの場合は、変数を使った方が手間が増えます。
デザインに合わせて、CSS変数でのカラー管理が必要か考えると良いでしょう。

◆複数のCSS変数でカラーバリエーションを作る

CSS変数では、変数の定義に変数を使うこともできます。
例えば、以下のようにCSS変数を組み合わせてカラーバリエーションを作ったりも出来ます。

以下ではHSLを使って、カラーバリエーションを作ってみます。
CSSで使える色の指定方法については、下記講座でも解説しています。

無料講座

HTML&CSSでつくるWEBサイト制作入門
≫ レッスン2：CSSで使われる4つの色指定方法

HSLはH（色相)）・S（彩度）・L（輝度）の3つの値を組み合わせ、色を指定する方法です。
--color_accentの橙色（#F15A24）を、HSLに置き換えるとHSL(16, 88%, 54%)。

この数値それぞれを変数にして、変数`--color_accent`で組み立てます。

:root {
    --color_h-accent: 16;
    --color_s-9: 88%;
    --color_l-5: 54%;
    --color_accent: hsl( var(--color_h-accent), var(--color_s-9), var(--color_l-5) );
}
.bg-accent{
    background-color: var(--color_accent);
}

HTMLの方にもクラスを追加します。

<h1 class="bg-accent">
    CSS Variables
</h1>

HSLのメリットは、同じ色味で明るい・暗いのバリエーション、同一トーンのカラーバリエーションを作る時にわかりやすいこと。

例えば明るい色を作りたい場合は、Lの値を大きい数にすればできます。
明るさ（L）の値を入れる--color_l-7というCSS変数を新たに作り、色そのものを設定する変数--color_accent-lightで使います。

:root {
    --color_h-accent: 16;
    --color_s-9: 88%;
    --color_l-5: 54%;
    --color_l-7: 68%;
    --color_accent: hsl( var(--color_h-accent), var(--color_s-9), var(--color_l-5) );
    --color_accent-light: hsl( var(--color_h-accent), var(--color_s-9), var(--color_l-7) );
    --w_content: 1200px;
}

.bg-accent{
    background-color: var(--color_accent);
}
.bg-accent-light{
    background-color: var(--color_accent-light);
}

<h2 class="bg-accent-light">
    <span class="num">1.</span>CSS変数とは
</h2>

色相（H）の値を変えると、別の色で同じトーンの色が作れます。
青系＝primaryとして、以下のように設定します。

:root {
    --color_h-accent: 16; /* 橙 */
    --color_h-primary: 221; /* 青 */
    --color_s-9: 88%;
    --color_l-5: 54%;
    --color_l-7: 68%;
    --color_accent: hsl( var(--color_h-accent), var(--color_s-9), var(--color_l-5) );
    --color_accent-light: hsl( var(--color_h-accent), var(--color_s-9), var(--color_l-7) );
    --color_primary: hsl( var(--color_h-primary), var(--color_s-9), var(--color_l-5) );
    --color_primary-light: hsl( var(--color_h-primary), var(--color_s-9), var(--color_l-7) );
}

.bg-primary{
    background-color: var(--color_primary);
}
.bg-primary-light{
    background-color: var(--color_primary-light);
}

<h1 class="bg-accent">
    CSS Variables
</h1>
<p class="bg-primary">
    CSS変数を使ってみるテストです
</p>
<h2 class="bg-accent-light">
    <span class="num">1.</span>CSS変数とは
</h2>
<p class="bg-primary-light">
    CSS変数は、CSSのプロパティ値に好きな名前をつけて呼び出せる機能です。
</p>

色味・明るさが揃って見えるのではないでしょうか。

例えば、primaryのカラーが青系ではなく紫系に変更になった場合。
HSLそれぞれの値をバラバラに管理している場合、--color_h-primaryの値を書き換えれば、その変数を使っているもの全てが更新されます。

/* --color_h-primary: 221; */
--color_h-primary: 280;

色の濃さでカラーバリエーションを作っていたり、:hoverなど状態に合わせて濃淡を付けていたり、という場合は、更新が楽でしょう。

とは言え、HSLやRGBの値を個別に用意する方法は、小規模なサイト、変更・更新をほぼしない場合、カラーの統一性があまりない場合は手間に見合いません。更新作業よりも、最初の準備のほうが大変……なんて場合は無理に使わなくてもよいでしょう。

こうした書き方は、大規模なサイトや、カラーテーマが複数あるようなUIを作る際に使われることもあります。
色の設定方法の一つとして、頭の片隅に置いておくと、いざという時にも困らないはずです。

ZooloppaでCSS変数を使ってみる

Zooloppaサイト（index.html）だと、上記でご紹介したようなCSS変数の活用箇所はほぼありません。
無理やり使う必要はないのですが、今回は練習なので、.containerのところで使ってみましょう。

余白を変えたい時、直すのは変数--p-inlineの値のみ。
CSS変数に慣れていると、calc()で行っている計算も何をしたいかが分かりやすいと思います。

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

design-sozai.zip