Webツールなどの作成で、カラーピッカーを表示したいときのハウツーです。
今回は、HTMLでのカラーピッカーの表示と、JavaScriptでの色の値の取得の方法を紹介します。
HTMLでカラーピッカーを表示する方法
まず、HTMLでカラーピッカーを表示する方法です。
カラーピッカーの表示は、inputタグのtype属性を、colorにすることで行ないます。
<input type="color">このタグを、使いたい場所に追加すると、下のような四角形が表示されます。（クリックしてみてください）
JavaScriptでカラーピッカーの値を取得する方法
つづいて、さきほどHTMLで表示したカラーピッカーの値を、JavaScriptで取得してみましょう。
JavaScriptで値を取得するには、さきほどのタグにidをつけてあげる必要があります。
<input id="colorPicker" type="color">さらに、取得した値を表示するところを作ってあげます。
<input id="colorPicker" type="color">
<span id="output"></span>では、このカラーピッカーの値をJavaScriptで取得してみましょう。
//カラーピッカーの要素を取得
const colorPicker = document.getElementById('colorPicker');
//色を出力するところの要素を取得
const output = document.getElementById('output');
//色を出力
output.innerHTML = colorPicker.value;
//カラーピッカーの色が変更されたとき、出力している色も変更する
colorPicker.addEventListener('input', () => {
output.innerHTML = colorPicker.value;
});まず2行目でカラーピッカーの要素を取得し、6行目でその要素のvalueを出力しています。
これでカラーピッカーの色の取得ができたことになります。
以下がそのサンプルです。実際に色を変更して、試してみてください。
まとめ
今回はHTMLでのカラーピッカーの表示と、JavaScriptでのカラーピッカーからの色の取得の方法を紹介しました。
カラーピッカーは、inputタグのtype属性を、colorにすることで表示できます。
また、JavaScriptでの色の取得は、まずカラーピッカーの要素を取得し、そのvalueを使うことで行なうことができます。
