CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ

Post on:2021年6月2日

はじめに

私が初めてCSSの変数を使い始めたときは、その可能性を十分に理解していませんでした。CSSの変数は適切な方法で使用すると、CSSで特定のことを行うための時間と労力を短縮することができます。

CSSの変数について知らない人は、CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説を読むことをお勧めします。慣れてしまえば、簡単に使用できます。

この記事ではカラーだけでなく、コンポーネントの実装においてCSSの変数の便利な使用方法を重点にフォーカスを当てました。準備はできましたか？
さぁ、はじめましょう！

CSS変数を活用できてない例

CSS変数をCSSプリプロセッサ（Sassなど）と同じように使っている場合、その恩恵を十分に活用していません。下記をご覧ください。

:root {
    --brand-primary: #7777e9;
    --brand-secondary: #c96fde;
}

.title {
    color: var(--brand-primary);
}

:root {

--brand-primary: #7777e9;

--brand-secondary: #c96fde;

}

.title {

color: var(--brand-primary);

}

上記は、Sassで下記のように書くのと同じです。

$brand-primary: #7777e9;
$brand-secondary: #c96fde;

.title {
    color: $brand-primary;
}

$brand-primary: #7777e9;

$brand-secondary: #c96fde;

.title {

color: $brand-primary;

}

カラーの変数だけにCSS変数を使用することは間違いではありませんが、それは古いパソコンでもまだ問題なく使えるのに、インターネットを見るためにApple M1 MacBookを手に入れるようなものです。最先端のコンピュータを手に入れたのに、そのポテンシャルをフルに活用しないことに何の意味があるのでしょうか？

CSS変数をカラーを格納するためだけに使用することに私が感じているのはまさにそれです。この記事の目的は、CSS変数の優れた使用例を紹介することです。

CSS変数の優れた使い方 1: ロングハンドのプロパティ

プロジェクトのシナリオによっては、プロパティのロングハンドバージョンを修正する必要がある場合があります。

例えば、paddingプロパティは、コンポーネントのバリエーションによってpaddingの値が異なる場合があります。その場合には、ロングハンドを書き直す代わりに、変更する部分にCSS変数を使用し、バリエーションのCSSクラスで上書きすることができます。

コンポーネントのバリエーションによってpaddingの値が異なる場合

<!-- コンポーネントのベース -->
<header class="page-header">
    <h2>...</h2>
    <p>...</p>
</header>

<!-- コンポーネントのバリエーション -->
<header class="page-header page-header--compact">
    <h2>...</h2>
    <p>...</p>
</header>

</header>

</header>

.page-header {
    --padding-start: 2.5rem;
    --padding-block: 2rem;
    padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start);
}

.page-header--compact {
    --padding-start: 1.5rem;
    --padding-block: 1rem;
}

.page-header {

--padding-start: 2.5rem;

--padding-block: 2rem;

padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start);

}

.page-header--compact {

--padding-start: 1.5rem;

--padding-block: 1rem;

}

paddingを変更する時は、CSS変数の値だけを変更すればよいことに注目してください。CSS変数を使用しない場合はpaddingの値を1つだけ変更するために、ロングハンドで全部を記述する必要があります。

.page-header {
    padding: 2rem 1rem 2rem 1.5rem;
}

.page-header--compact {
    padding: 1rem 1rem 1rem 2.5rem;
}

.page-header {

padding: 2rem 1rem 2rem 1.5rem;

}

.page-header--compact {

padding: 1rem 1rem 1rem 2.5rem;

}

もちろんこのテクニックは、marginにも使用できます。

CSS変数の優れた使い方 2: 背景

CSSの背景に関しては、CSS変数を使うことでCSSコードの書く量を減らすことができます。さらに良いことに、CSSをより読みやすくすることもできます。

CSS変数に背景のURL値を保存

UIでは画像を装飾的な目的で使用する場合があります。その場合には、background-imageとともに<div>を使用することをお勧めします。動的にする必要がある場合は、画像の値をJavaScriptで挿入する必要があります。

CSS変数がない場合、HTMLは下記のようになります。

<section 
    class="newsletter" 
    style="background-image: url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">
</section>

<section

class="newsletter"

style="background-image: url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">

</section>

background-imageプロパティを直接変更するのではなく、下記のようにします。

<section 
    class="newsletter" 
    style="--thumb:url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">
</section>

<section

class="newsletter"

style="--thumb:url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">

</section>

.newsletter {
    background-image: var(--thumb);
    background-size: cover;
    background-position: 100% 50%;
}

.newsletter {

background-image: var(--thumb);

background-size: cover;

background-position: 100% 50%;

}

CSS変数を使用する際にもurl()を記述する必要があることに注意してください。

背景画像のポジション

上記の上では背景画像は右側に配置されています。上記の下では右から左のレイアウト（RTL）で背景の位置を反転させる必要があります。

.newsletter {
    --pos: 100% 50%;
    background-image: var(--thumb);
    background-size: cover;
    background-position: 100% 50%;
}

html[dir="rtl] .newsletter {
    -background-position: 0% 50%;
}

.newsletter {

--pos: 100% 50%;

background-image: var(--thumb);

background-size: cover;

background-position: 100% 50%;

}

html[dir="rtl] .newsletter {

-background-position: 0% 50%;

}

これを簡単にするために、CSS変数を使用できます。

.newsletter {
    /* other styles */
    background-position: var(--pos);
}

html[dir="rtl] .newsletter {
    --pos: 0% 50%;
}

.newsletter {

/* other styles */

background-position: var(--pos);

}

html[dir="rtl] .newsletter {

--pos: 0% 50%;

}

CSS変数の優れた使い方 3: グラデーション

グラデーションの角度 1

これは、多言語レイアウトの構築にも関係します。グラデーションの角度は、デフォルトでは45degで、RTLレイアウトでは-45degにする必要があるとします。その場合、下記のように簡単に記述できます。

.element {
    --angle: 90deg;
    background: linear-gradient(var(--angle), #4088vb, #C05858);
}

html[dir="rtl] .element {
    --angle: -90deg;
}

.element {

--angle: 90deg;

background: linear-gradient(var(--angle), #4088vb, #C05858);

}

html[dir="rtl] .element {

--angle: -90deg;

}

グラデーションの角度 2

グラデーションの角度に関しては、放射状グラデーションでCSS変数を使用すると、位置を微調整するのに非常に便利です。次の例では、--pos変数を変更するだけでグラデーションの位置が変更できます。

まずは、CSS変数なしでこれを実装する方法は次のとおりです。

.card {
    background: radial-gradient(
        circle 200px at center top,
        rgba(64, 136, 203, 0.5),
        #f7f7f7
    );
}

.card {

background: radial-gradient(

circle 200px at center top,

rgba(64, 136, 203, 0.5),

#f7f7f7

);

}

.card-2のカードはバリエーションで、位置が異なるとします。その場合は次のようになります。

.card-2 {
    background: radial-gradient(
        circle 200px at center top,
        rgba(64, 136, 203, 0.5),
        #f7f7f7
    );
}

.card-2 {

background: radial-gradient(

circle 200px at center top,

rgba(64, 136, 203, 0.5),

#f7f7f7

);

}

グラデーションの宣言全体が上書きされています。
もっと良い方法はないでしょうか？

もちろんあります。
CSS変数を使用したバリエーションでは、--pos変数の調整値しかしてないことに注目してください。

.card {
    --pos: center top;
    background: radial-gradient(
        circle 200px at var(--pos),
        rgba(64, 136, 203, 0.5),
        #f7f7f7
    );
}

.card-2 {
    --pos: left top;
}

.card {

--pos: center top;

background: radial-gradient(

circle 200px at var(--pos),

rgba(64, 136, 203, 0.5),

#f7f7f7

);

}

.card-2 {

--pos: left top;

}

CSS変数の優れた使い方 4: クリップパス

CSS変数の便利な使い方は、スマホとデスクトップでclip-path: polygon()の値を簡単に変更できることです。

スマホとデスクトップで変化するクリップパス

通常はポリゴンのポイントを変更する必要がありますが、CSS変数を使用することでそのプロセスが簡単になります。

.hero {
    --first: 4% 7%;
    --second: 80% 0;
    --thrid: 100% 95%;
    --fourth: 10% 100%;
    clip-path: polygon(var(--first), var(--second), var(--thrid), var(--fourth));
}

@media (min-width: 40rem) {
    .hero {
        --second: 96% 0;
        --thrid: 92% 82%;
    }
}

.hero {

--first: 4% 7%;

--second: 80% 0;

--thrid: 100% 95%;

--fourth: 10% 100%;

clip-path: polygon(var(--first), var(--second), var(--thrid), var(--fourth));

}

@media (min-width: 40rem) {

.hero {

--second: 96% 0;

--thrid: 92% 82%;

}

CSSのクリップパスについてもっと知りたい場合は、Understanding Clip Path in CSSをご覧ください。

CSS変数の優れた使い方 5: チェックボックスのコンポーネント

CSS変数の完璧な使用例は、hsla()カラーと組み合わせることです。そうすることで、1つまたはいくつかのCSS変数を変更するだけで、ダイナミックなコンポーネントを作成することができます。

CSS変数はhsla()カラーと組み合わせると最強

最初に、コンポーネントのルート要素にhsla()値を定義します。

.form-item {
    --primary-h: 240;
    --primary-s: 56%;
    --primary-l: 63%;
    --primary-alpha: 100%;
}

.form-item {

--primary-h: 240;

--primary-s: 56%;

--primary-l: 63%;

--primary-alpha: 100%;

}

これで、これらのプロパティをhsla()カラー関数で使用できます。

/* ホバーで表示されるサークル */
.form-item__label:after {
    --primary-alpha: 0;
    background-color: hsla(
        var(--primary-h),
        var(--primary-s),
        var(--primary-l),
        var(--primary-alpha)
    );
}

.form-item__label:hover:after {
    --primary-alpha: 15%;
}

/* ホバーで表示されるサークル */

.form-item__label:after {

--primary-alpha: 0;

background-color: hsla(

var(--primary-h),

var(--primary-s),

var(--primary-l),

var(--primary-alpha)

);

}

.form-item__label:hover:after {

--primary-alpha: 15%;

}

実際の動作は、下記をご覧ください。

See the Pen
Practical CSS Vars: Checkbox by Ahmad Shadeed (@shadeed)
on CodePen.

CSS変数の優れた使い方 6: SVGを使用したインラインCSS

クライアントのプロジェクトでUIを実装していたときに、下記のような要件に遭遇しました。

SVGを使用したインラインCSS

2つのテープ（1つは上部、もう1つは下部）があるセクションです。要件としては、テープのカラー・回転・サイズをそれぞれカスタムCSSを記述せずに変更する必要があります。

こういった要件に最適なのは、CSS変数です！
まず、IllustratorでSVGを作成します。テープを3つのレイヤーに分けました。

明るいエリア
暗いエリア
ベース

テープは3つのレイヤーに分けて作成

次に、SVGをエクスポートし、そのコンテンツを<defs>内に配置して、再利用しやすくしました。currentColorに注目してください、これが機能させるための魔法の値です。

currentColorに注目！

最後に、CSSでサイズと回転を定義します。

.tape {
    width: var(--size);
    transform: rotate(var(--angle));
}

.tape {

width: var(--size);

transform: rotate(var(--angle));

}

<svg class="tape" style="--angle: 10deg; color: red; --size: 120px;" aria-hidden="true" focusable="false" viewBox="0 0 123 47">
  <use href="#tape"></use>
</svg>

</svg>

テープのカラー・回転・サイズは、CSS変数で簡単に変更できます。

テープのカスタマイズが簡単になりました

以上です。必要に応じてカスタマイズ可能なカスタムSVGを作成しました。
CSS変数はパワフルではありませんか？

See the Pen
SVG Tape by Ahmad Shadeed (@shadeed)
on CodePen.

CSS変数の優れた使い方 7: SassのようなMixinの構築

このテクニックはLea Verouの動画で知りました。そのコンセプトは、特定のプロパティに対してCSSの初期変数を定義し、必要に応じてその変数を上書きするというものです。

実際に例を見てみましょう。
多くの場合、ラッパーを中央に配置すると思います。中央配置にするには、margin: 0 auto;で実装できます。中央に配置したい要素がある場合は、下記のようにすることができます。

<div class="featured-section u-center"></div>

1	<div class="featured-section u-center"></div>

.u-center {
  --mx: initial;
  --my: initial;

  margin: var(--my) var(--mx);
}

.featured-section {
  --mx: auto;
  --my: 2rem;
}

.u-center {

--mx: initial;

--my: initial;

margin: var(--my) var(--mx);

}

.featured-section {

--mx: auto;

--my: 2rem;

}

まず、デフォルトの水平・垂直マージン値を使用してユーティリティクラス.u-centerを作成します。このクラスを要素に与えてから、CSS変数を上書きすることができます。例えば、要素の上下にマージンが必要になった場合などに便利です。

CSS変数の優れた使い方 8: calc()と併用

calc()関数は、CSSの変数でも非常に便利です。コンポーネントの基本サイズを作成し、変数を1つだけ変更するだけでコンポーネントを小さくしたり大きくしたりすることができます。

これは、さまざまなユースケースで役立ちます。ユーザーアバターのバリエーションが必要だとしましょう。

さまざまなサイズが必要なアバター画像

.c-avatar {
  width: calc(var(--size, 32) * 1px);
  height: calc(var(--size, 32) * 1px);
}

.c-avatar {

width: calc(var(--size, 32) * 1px);

height: calc(var(--size, 32) * 1px);

}

var(--size, 32)に注目してください。もし--size変数が定義されていなければ、32がフォールバックとして使用されます。1pxは、最終的な数値にpxを追加するために重要です。

これで、--size変数の値を変更するだけで、さまざまなサイズを使用できるようになりました。

.c-avatar--medium {
    --size: 64;
}

.c-avatar--large {
    --size: 128;
}

.c-avatar--medium {

--size: 64;

}

.c-avatar--large {

--size: 128;

}

CSS変数の優れた使い方 9: 疑似要素

CSS変数を使えば、擬似要素のプロパティは親から継承されているので、変更することが可能です。次のような例を考えてみましょう。

タイトルの上のラインは、疑似要素で実装

セクションのタイトルには、パープルの装飾的なラインがあり、これは擬似要素で実装されています。タイトルにCSS変数を渡すと、疑似要素がそれを継承します。

.section-title {
    --dot-color: #829be9;
}

.section-title:before {
    content: "";
    background-color: var(--dot-color);
}

.section-title {

--dot-color: #829be9;

}

.section-title:before {

content: "";

background-color: var(--dot-color);

}

それだけでなく、JavaScriptで擬似要素のカラーを変更することを真似ることもできます。

CSS変数の優れた使い方 10: インラインスタイル

最後にもう1つ、CSS変数の便利な使い方はインラインスタイルとして使用することです。これにより、1つまたは複数の変数を変更するだけで、コンポーネントをカスタマイズできる可能性が大きく広がります。

次のような例を考えてみましょう。

.o-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-width, 200px), 1fr);
    grid-gap: var(--gap);
}

.o-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(var(--item-width, 200px), 1fr);

grid-gap: var(--gap);

}

グリッドがあり、グリッドアイテムのデフォルトの幅は200pxです。HTMLにCSS変数をインラインスタイルで記述し、それを上書きすることができます。

<!-- Example 1 -->
<div class="o-grid" style="--item-width: 250px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 2 -->
<div class="o-grid" style="--item-width: 350px;">
     <div></div>
     <div></div>
     <div></div>
</div>