ログイン
問題26

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

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

アイコン画像

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

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

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

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

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

コメントのアイコン解説

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

デフォルトの色につきましては、valueに対してカラーコードを入れます。
ログインして解答を見る

コメントのアイコン補足

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

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

JavaScriptの学習を始めたら、活用してみましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる