コーディング

CSSカスタムプロパティをリアルタイムで動かせるライブラリ

こんにちは、ワタナベです。

今回は「slideVars」というライブラリを触ってみました。

slideVarsはCSSのカスタムプロパティ(変数)を操作するためのUIを自動で作成してくれます。
導入すると画面上にUIが現れ、リアルタイムでデザインが変化するようになります!

:rootに定義されているCSSプロパティを自動スキャンし、色や数値を検知してカラーピッカーやスライダーを作成します。

以下サンプルです。

SAMPLE

See the Pen Untitled by Akiho (@wcaotdaenpaebne) on CodePen.

jsを読み込むだけで簡単に使用できます。
サンプルでは各背景色、角丸、フォントサイズ、カラーを変更できます。

リアルタイムで変化するので、スタイルの微調整や色を変えた時どう見えるか等を見るのに使えそうです!

是非使ってみてください。

それではまた次回。
ご閲覧ありがとうございました。

建築に特化したホームページで集客&受注へ

株式会社D-Gripシステム
実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ