ログイン

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

HTML_CSSの問題

HTML_CSS

カラーピッカーとは、色を選択することのできるダイアログボックスのことです。 HTMLではこのカラーピッカーを簡単に表示させることができます。覚えておきましょう。

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

問題

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

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

期待する画面

コードのアイコン

解答ソースコード

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

解説

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

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

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

JavaScriptの学習を始めたら、活用してみましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!