[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr

Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。
レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。

他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。

サイトのキャプチャ

Pickr
Pickr -GitHub

Pickrの特徴

Pickrのデモ
  • カラーピッカーの使い方は、簡単
  • HEX, RGBa, CMYK, HSLa, HSVaをサポート
  • jQueryなどの他スクリプトへの依存は無し
  • Bootstrap, MaterializeなどのCSSフレームワークへの互換性
  • 複数の色表現
  • 色の比較
  • 不透明度のコントロール
  • タッチデバイスをサポート
  • Nodejsのサポート
  • 8kBの超軽量スクリプト

Pickrのデモ

カラーピッカーの実際の動作は、下記ページで楽しめます。

サイトのキャプチャ

デモページ

Pickrの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

カラーピッカーを配置する要素を用意します。

Step 3: JavaScript

カラーピッカーを配置する要素を指定し、スクリプトを実行します。

オプションでは、初期表示、ボタンの有無などを設定できます。

sponsors

top of page

©2018 coliss