問題26:カラーピッカーを表示しよう
フォームなどでも使えるカラーピッカーを選択できる画面を出してみよう!
見本動画を参考にして実装してください。
見本動画を参考にして実装してください。
期待する画面
解答ソースコード
<input type="color" id="head" name="head" value="#e7e7e7">
<label for="head">左を押下してカラーを選んでください</label>
¥HTML¥
補足
カラーピッカーのデフォルトは黒色(#000000)が表示されるようになっていますが、解説で説明した属性を使用すればデフォルト値を変更することもできます。
カラーピッカーで選択した色は、実はHTMLだけでは他の要素などに反映することができません。反映させるにはJavaScriptを用いる必要があります。
JavaScriptの学習を始めたら、活用してみましょう。
カラーピッカーで選択した色は、実はHTMLだけでは他の要素などに反映することができません。反映させるにはJavaScriptを用いる必要があります。
JavaScriptの学習を始めたら、活用してみましょう。
#忍者CODE無料問題集で活動を記録しよう
完了にする!
1.HTMLの宣言をしてみよう
デフォルトの色につきましては、valueに対してカラーコードを入れます。