1. HOME
  2. »
  3. ミニハウツー
  4. »
  5. プログラミング
  6. »
  7. JavaScript
  8. »
  9. 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を使うことで行なうことができます。

スポンサードリンク

関連コンテンツ

オススメ記事

絶対分かる!JavaScriptでの三項演算子の使い方

プログラミングで真理値の条件分岐を行ないたいとき、三項演算子を使うと便利です。今回はJavaScriptでの三項演算子の使い方について紹介していきたいと思います。 JavaScript

tkinterで「No module named ‘_tkinter’」と表示されるときの対処法

MacにインストールしたPythonでtkinterを使おうとしたとき、「ModuleNotFoundError: No module named '_tkinter'」というエラーメッセージが表示

zshで色(256色)と数値を一覧表示して素早く確認する方法

zshのプロンプトをカスタマイズしているときに、文字の色を変えたり、背景色を変更したいときがあります。しかし、どの数値がどの色を示しているのかなんて覚えていられないし、そのたびに検索するのも大変です