CSSカスタムプロパティをグリグリ動かせる「slideVars」が便利

slideVarsとは

slideVarsはCSSのカスタムプロパティ（変数）を操作するためのUIを、自動で作ってくれるライブラリーです。CSSカスタムプロパティについては過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」を読んでみてください！

通常CSSカスタムプロパティの値を変更するにはコードを書き換える必要がありますが、slideVarsを導入すると、画面上にスライダーやカラーピッカーが出現します。これを動かすだけで、リアルタイムにデザインが変化するようになります。

自動検出機能

一番の魅力は、設定がほぼ不要な自動検出機能です。

:root に定義されているCSSカスタムプロパティを自動でスキャンして、以下のことをやってくれます。

色を検知してカラーピッカーを作成

hex (#ffffff), rgb, hsl はもちろん、最新の oklch や hwb、名前付きカラー（red, blueなど）も認識します。

数値を検知してスライダーを作成

px, rem, em, % などの単位が付いた数値を認識し、いい感じの範囲でスライダーを作ってくれます。

よく分からない値はスキップ

解釈できないものは無視してくれるので、エラーで止まる心配も少ないです。

slideVarsの使い方

では、実際にWebサイト制作の実験場である「CodePen」を使って試してみましょう。

1. 読み込みと初期化

CodePenのJS（JavaScript）欄に、以下のコードを書くだけです。

// ライブラリを読み込む（esm.shというCDN経由で読み込みます）
import { slideVars } from "https://esm.sh/@codepen/slidevars";

// 初期化（これだけでOK！）
slideVars.init();

2. CSS変数を定義する

次にCSS欄でカスタムプロパティを定義します。ここでは背景色を変数にしてみましょう。

:root {
  --bg: #00bbdd; /* これが自動で検知されます */
}
body {
  background: var(--bg);
}

たったこれだけで、画面の右上に設定用のアイコンが出現します！それをいじると、背景色がリアルタイムに変わっていきます。

デモ。いい感じに背景色が変化していくはずです！

複数の変数を試してみる

複数指定するときは、CSSの :root に複数のカスタムプロパティを記述するだけ。slideVarsが自動的に色用のピッカーとサイズ用のスライダーを生成してくれます。

:root {
  --bg: #00bbdd;
  --size: 200px;
}
p {
  background: var(--bg);
  width: var(--size);
  padding: 1rem;
}

デモ。画面右上から設定パネルを開くと、カスタマイズできる値が増えています。

細かい設定

自動検出は便利ですが、時にはスライダーの最大値をもっと大きくしたいとか、特定の要素だけに適用したいという場合もありますよね。そんなときは、init() の中に設定を書くことで細かくコントロールできます。

import { slideVars } from "https://esm.sh/@codepen/slidevars";

slideVars.init(
  {
    // --width という変数に対する設定
    "--width": {
      type: "slider", // タイプ：現在は slider か color のみ
      min: 10,        // 最小値
      max: 500,       // 最大値
      default: 50,    // 初期値
      unit: "px",     // 単位
      scope: "#animation", // 特定の要素（IDなど）の中だけで有効にする場合
    },
    // --bg という変数に対する設定
    "--bg": {
      type: "color",
      default: "red",
    },
  },
  {
    defaultOpen: false, // trueにすると、読み込み時に最初からパネルが開いた状態になります
  }
);

コントローラーパネルの見た目を変える

デフォルトでは、画面の隅に自動的にパネルが生成されますが、HTML内に自分で配置場所を指定することも可能です。これをやると、パネルにタイトルをつけたり説明文を追加したりできるので、作品を見せる時に親切かもしれません。

<slide-vars>
  <h2>デザイン調整パネル</h2>
  <p>下のスライダーを動かして、好みの見た目を探してみてね！</p>
</slide-vars>

ローカル環境で使う場合

CodePenだけでなく、自分のPCで開発しているプロジェクト（ViteやWebpackなど）でも使えます。まず、 npm でインストールします。

npm install @codepen/slidevars

あとはslideVarsを読み込んで、実行するだけです。

import { slideVars } from "@codepen/slidevars";

slideVars.init();

これだけで開発中のローカルサーバーでもグリグリ動くUIを実装できます。クライアントに向けて、または勉強会などでプレゼンしながら、見た目をサッとその場で変えて見せたら「おおっ！」となるかも…！

プログラミングやデザインの学習において、「自分で値を変更して、どうなるか確認する」というプロセスは本当に大切です。このツールを使えば、そのプロセスが遊び感覚で体験できますね。ぜひ次回のCodePenでの作品作りや、日々のコーディングの練習に取り入れてみてください！

• slideVars 公式サイト
• GitHub
• @codepen/slidevars - npm