カラーピッカーを表示しよう

問題26：カラーピッカーを表示しよう

フォームなどでも使えるカラーピッカーを選択できる画面を出してみよう!

見本動画を参考にして実装してください。

期待する画面

解答ソースコード

              <input type="color" id="head" name="head" value="#e7e7e7">
<label for="head">左を押下してカラーを選んでください</label>
¥HTML¥

解説

カラーピッカーを使用するには、inputタグのtype="color"を付与します。

デフォルトの色につきましては、valueに対してカラーコードを入れます。

ログインして解答を見る

補足

カラーピッカーのデフォルトは黒色(#000000)が表示されるようになっていますが、解説で説明した属性を使用すればデフォルト値を変更することもできます。

カラーピッカーで選択した色は、実はHTMLだけでは他の要素などに反映することができません。反映させるにはJavaScriptを用いる必要があります。

JavaScriptの学習を始めたら、活用してみましょう。

#忍者CODE無料問題集で活動を記録しよう

完了にする！

BACK > hoverしたら画像を大きくしようへ

NEXT > floatを使おうへ

コース一覧に戻る

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。