<input type="color"> カラーピッカーを設置する

catnose · 2020/02/10 に最終更新

HTMLの<input type="color">はカラーピッカー（色を選ぶ入力欄）を設置するために使います。

<label>色を選択
  <input type="color" name="favorite_color">
</label>

👆対応ブラウザで見ると、カラーピッカーが表示されているはずです。

ブラウザやOSごとの表示の違い

<input type="color">の見た目や操作方法は、ブラウザやOSにより大きく異なります。

👇以下で紹介するピッカーUIのスクショは、OSやブラウザのバージョンにより表示が異なることがあります。

Macでのカラーピッカーの表示イメージ

例えばこちらの画像はMac💻のChromeで<input type="color">のフィールドをクリックしたときに表示されるカラーピッカーです。MacのFirefoxでもほとんど同じ表示となります。

Windowsのinput type="color"の表示イメージ

こちらはWindows💻のChromeでのカラーピッカーです。同じChromeでもMacとWindowsで全く表示が異なることが分かると思います。

iOSのinput type="color"の表示イメージ

こちらはiOS Safari📱のカラーピッカーです。フィールドをタップすると、キーボードと同じように下からニュッと表示されます。

このように<input type="color">を設置したときの表示はブラウザやプラットフォーム（OS）により全く異なります。

<input type="color">に未対応のブラウザだと、ただの文字列の入力欄（<input type="text">と同じ）になります。

もし、どのブラウザでも統一したデザインで表示したい場合は<input type="color">ではなく、カラーピッカー系のライブラリを使うのが良いでしょう。ライブラリを使えば、<input type="color">に未対応のブラウザにも対応できます。

😺英語では「React color picker」や「jQuery color color picker」というキーワードを使って検索すると見つけやすいでしょう。

<input type="color">を使った簡単なHTMLのサンプルを紹介します。

<form>
  <label>色を選択
    <input type="color" name="favorite_color">
  </label>
  <button type="submit">送信</button>
</form>

👆<label>タグの使い方やname属性の使い方は、他の種類の<input>と全く変わりません。このサンプルではname="favorite_color"なので、送信されるフォームデータにはfavorite_color=選択した色コードが含まれることになります。

<input type="color">で選択された値は#ffa500のような7桁の文字列になります。いわゆる「HEX」と呼ばれる16進数のカラーコードですね。

<input type="color" name="favorite_color" value="#ffa500">

👆value="カラーコード"とすることで、フィールドの初期値（デフォルトの値）を指定できます。

もしvalue="◯◯"を指定しなかった場合、デフォルトの値は#000000（=黒色）となります。

その他の種類の<input>の使い方はこちらのページで解説しています。