全国対応!外注・下請けのホームページ制作会社をお探しの会社様。外注・下請けホームページ制作TOPWEBブログspectrum.jsで簡単にカラーピッカーを設置するspectrum.jsで簡単にカラーピッカーを設置する2019.07.19プログラミングJavaScriptこんにちは!エンジニアの平田です。今回は簡単にカラーピッカーを設置できるプラグイン「spectrum.js」をご紹介いたします。href="js/color/spectrum.css">jQueryを用意し、Spectrumからプラグインをダウンロードします。spectrum.jsとspectrum.cssの2つがあればOK※日本語対応の場合は2行目のようにjquery.spectrum-ja.jsを読み込みます。先にjQueryを記述してから、spectrum.jsとspectrum.cssを読み込ませましょう。type="text">inputにjsを読み込ませるとデフォルトのカラーピッカーが表示されます。デフォルトはこんな感じです。CodePen.上にあるデフォルトを元に、カラーピッカーで色を選択したら、下の枠に選択した色が反映されるデモを作成しました。「選択した色」を取得するため「toHexString();」を使います。色が選択できた後のイベント});});上記はspectrum.jsのオプションです。まとめ管理画面や自作のブログに使えそうなカラーピッカー(spectrum.js)です。オプションやcssで見た目を簡単に変えられるのでぜひ使ってみて下さいね。弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。無料相談窓口メールでのお問い合わせお見積りのご。