1. HOME»
  2. ミニハウツー»
  3. プログラミング»
  4. JavaScript»
  5. HTMLでカラーピッカーを表示し、JavaScriptで値を取得する方法

HTMLでカラーピッカーを表示し、JavaScriptで値を取得する方法

Webツールなどの作成で、カラーピッカーを表示したいときのハウツーです。

今回は、HTMLでのカラーピッカーの表示と、JavaScriptでの色の値の取得の方法を紹介します。

目次
  1. HTMLでカラーピッカーを表示する方法
  2. JavaScriptでカラーピッカーの値を取得する方法
  3. まとめ

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を使うことで行なうことができます。

オリジナルゲーム.com