【初心者でもわかる】たった1行でカラーピッカーを実装

どうも7noteです。1行で作るカラーピッカー（※IE非対応）

HTMLではカラーピッカーをたった1行で作成できてしまいます！

index.html

<input type="color" value="#ffffff">

ちょっとわかりにくいかもですが、左上の小さいボタンらしき四角をクリックすると、カラーピッカーを表示することができます。

応用編：カラーピッカーの値を取得して、WEBサイトの背景色を変更する

index.html

<input type="color" value="#ff0000" id="colorpicker">

script.js

// カラーピッカーを変数に格納
var picker = document.getElementById("colorpicker");

// 値が変更された時、背景色を変更する
picker.addEventListener('change', (event) => {
    var inputValue = picker.value;
    document.body.style.backgroundColor = inputValue ;
});

まとめ

なかなか使う機会は少ないかもしれないですが、覚えて置くとどこかで使えるかもしれません。
単純に作成していて面白かったので、これを使ってなにかおもしろいものを作ってみたいですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ