CSS変数の値をリアルタイムに変更しながらデザインを微調整したい場面は多いと思います。外部ライブラリを導入したり、複雑なJavaScriptを書いたりすることなく、CodePenに標準搭載されている slideVars ツールを使えば、簡単にこの機能を実現できます。本記事では、slideVarsの基本的な使い方からカスタマイズ方法まで、実践で役立つ情報を共有します。詳細は参考資料をご覧ください。

Web developer coding on a laptop with CSS code on screen Algorithm Concept Visual

基本使用法: 2行で始める

slideVarsを使用するには、CodePenのJavaScriptパネルでモジュールをインポートし、初期化するだけです。すると、CSSで定義された変数を自動検出し、右上にコントロールパネルを構築します。

// JavaScriptパネルに追加
import { slideVars } from "@codepen/slidevars";
slideVars.init();

注意点: デフォルト（自動）モードでは、変数を:rootに宣言し、デフォルト値を定義する必要があります。以下は関連するCSSの例です。

/* CSSパネルに追加 */
:root {
  --main-color: #ff6b6b; /* スライダーで調整可能な色 */
  --spacing: 20px; /* スライダーで調整可能な間隔 */
  --rotation: 0deg; /* スライダーで調整可能な回転角度 */
}

.box {
  background-color: var(--main-color);
  padding: var(--spacing);
  transform: rotate(var(--rotation));
}

上記のコードを追加すると、CodePenの右上に--main-color、--spacing、--rotation用のスライダーが自動的に表示されます。

Interactive UI design with sliders and controls IT Technology Image

高度な設定: 手動構成

自動検出モードが合わない場合や、特定の要素にのみ変数を適用したい場合は、手動で設定できます。slideVars.init()に設定オブジェクトを渡します。

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

slideVars.init({
  variables: [
    {
      name: "--box-size", // CSS変数名
      value: 100, // デフォルト値
      unit: "px", // 単位 (空文字列""は単位なしを意味)
      min: 50, // 最小値
      max: 300, // 最大値
      scope: ".my-box" // 変数が適用されるCSSセレクタ
    },
    {
      name: "--opacity",
      value: 0.5,
      unit: "", // 単位なし (unit-less)
      min: 0,
      max: 1,
      step: 0.1 // 現在は完全にサポートされていない (整数のみ増加)
    }
  ]
});

現在の制限: 手動モードでのstepプロパティは、まだ完全にはサポートされていないようです。単位なしの値(unit: "")は整数単位でのみ増加します。デフォルト（自動）モードでは小数点調整が可能です。

Modern developer desk setup with multiple monitors Software Concept Art

実践的なアドバイスとまとめ

  • パネルの位置変更: HTML内の任意の場所に<slide-vars>カスタム要素を追加すると、パネルをその場所にレンダリングできます。デフォルトはHTMLの最下部です。
  • スタイリング: 生成された<slide-vars>要素にCSSを適用して、デザインを変更できます。
  • CodePen外部での使用: @codepen/slidevarsモジュールは、CodePen外のプロジェクトでもインポートして使用可能です。

slideVarsは、プロトタイピング、教育、または単にCSSプロパティの影響をリアルタイムで確認したい場合に非常に強力なツールです。複雑な設定なしに、迅速にインタラクティブなデモを作成できる点が最大の魅力です。一度お試しください。