20

1206

仕事と暮らし

いつでもどこでもカラーピッカー!

梅雨に入りジメジメとした季節になって参りました。
さて、本日はカラフルな話題でそんなジメジメを吹き飛ばしていきたいと思います!

カラーピッカー

みなさん、カラーピッカーはご存知でしょうか?
PhotoshopやIllustratorを利用する方ならお馴染みですね。
そう、無数にある色の中からひとつを選択し、RGBやHEXの値を取得できる優れものです!
なんと、そんなカラーピッカーをHTMLでいとも簡単に表示できるというではありませんか!
では、実際に試してみましたので、以下をご覧ください。

See the Pen
ColorPicker
by Masaaki Sakamoto (@jazzboy)
on CodePen.

解説

では解説していきましょう!
まず、今回の重要なポイントは以下です。

<input type=”color” value=”#0000ff”>

こちらのinputタグに「type=”color”」を指定することでカラーピッカーを表示し、「value=”#0000ff”」にてデフォルトで表示される色を選択しています。
はい!重要なポイントはこれだけです!
あとは、表示されるカラーピッカーの大きさなどをCSSで調整してやれば出来上がりです!
非常に簡単ですね!
こんなに簡単にカラーピッカーが表示できるなんて、驚きですよね!

問題点

ただ、このカラーピッカー、問題点があります。
それは






いつ使うんでしょう。。。
そうです、悲しいことに使いどころがほぼありません。
ユーザーさんに色を選択してもらうサイトなどでは使えそうですが、そもそもこんな膨大な色の中から選択してもらうことってないですよね。。。

いかがだったでしょうか?
使いどころがほぼないという悲しい結果ではありましたが、知っていて損はないですよね!
さあ、みんなも、Pick a color!!

坂本 政昌