全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい

0584-73-5123 平日
9:00~18:00

Web blog WEBブログ

外注・下請けホームページ制作TOP
WEBブログ
spectrum.jsで簡単にカラーピッカーを設置する

spectrum.jsで簡単にカラーピッカーを設置する

2019.07.19

フロントエンド(HTML/CSS)

※この記事は2019年07月19日時点の情報をもとに作成されました。

こんにちは！
こんにちは。コーダーの兼山です。

今回は簡単にカラーピッカーを設置できるプラグイン「spectrum.js」をご紹介いたします。

【目次】

1. spectrum.jsをダウンロードする
2. spectrum.jsでカラーピッカーを設置（デモ）
3. 色を選択したら反映される（デモ）
4. spectrum.jsのオプション

spectrum.jsをダウンロードする

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/color/spectrum.js"></script> 
<link rel="stylesheet" href="js/color/spectrum.css">

jQueryを用意し、
Spectrumからプラグインをダウンロードします。

spectrum.jsとspectrum.cssの２つがあればOK
※日本語対応の場合は2行目のようにjquery.spectrum-ja.jsを読み込みます。

先にjQueryを記述してから、spectrum.jsとspectrum.cssを読み込ませましょう。

spectrum.jsでカラーピッカーを設置（デモ）

 jQuery(function($){
 $(".picker").spectrum({});
});

 <input class="picker" type="text">

inputにjsを読み込ませるとデフォルトのカラーピッカーが表示されます。
↓　デフォルトはこんな感じです。

See the Pen
YmPyBj by hirata (@runrundhirata)
on CodePen.

色を選択したら反映される（デモ）

See the Pen
jsdemo by ひ (@hiratarunrund)
on CodePen.

上にあるデフォルトを元に、
カラーピッカーで色を選択したら、下の枠に選択した色が反映されるデモを作成しました。

「選択した色」を取得するため「toHexString();」を使います。

change: function(color){　　　色を変えます
iro=color.toHexString();　　　選択した色を取得してiroにいれます
$(‘#color’).css(‘background’,iro);}　#colorの背景をiroにします！

spectrum.jsのオプション

 jQuery(function($){
 $(".picker").spectrum({

color: "#f00", //初期色を設定できます

allowEmpty: true, //初期色無し

flat: true, //大きなカラーピッカー

showInput: true, //hsvの数値を表示

chooseText: "選択", //ボタンの文字を変更

cancelText: "閉じる", //ボタンの文字を変更

change: function(color){ },// 色を変更している時のイベント

move: function(color){ },// 色が選択できた後のイベント

});
});

上記はspectrum.jsのオプションです。