Javascriptでユーザに色プロパティを指定させる表示する方法

Javascriptのカラーピッカーでユーザに色プロパティを指定させる方法

最近JavascriptもしくはTypescriptで仕事をする機会が増えたのでJavascriptの基本技術を振り返っていこうと思います。

今回はカラーピッカーで選択した色プロパティを使って表示を整える方法をソースコードを交えて解説していきます。この方法は主にユーザに好みの色を選択してもらい,独自カスタマイズ性があると主張することに使います。

ゲームとかでもたまに見かけるので使用頻度はそこそこあると思います。表示の綺麗さとかは調整することが多いですが。

カラーピッカーで色を選択する方法

では早速カラーピッカーを使って色情報をユーザに選択させるプログラムを示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <mata charset="UTF-8">
    <title>Programming News</title>
  </head>

  <body>
    <input type="color" id="selectcolor" />
    <p id = "explain">選択された色</p>
    <script>
     document.querySelector("#selectcolor").addEventListener('change',(event)=>{
       //色が変更された場合に色情報を取得する
       const colorval = event.target.value;
       let test = document.querySelector("#explain");
       test.innerHTML = "選択された色は " + String(colorval) + " です";
       test.style.color = colorval;
     })
    </script>
  </body>
</html>

実際の画面はこのようになります。初期状態と