<input type="color" ... />
HTMLページでカラー選択ボックス (カラーピッカー ダイアログ)を表示するコードを紹介します。
HTMLページで色選択をする場合にカラーピッカーのダイアログを表示したい場合があります。
HTMLページでカラーピッカーダイアログを表示するには、inputタグを記述し、type属性に"color"を指定します。
<input type="color" ... />
<input type="color" value="[カラー値]"... />
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>カラーピッカーのデモ</h2>
<form>
<input type="color"/>
</form>
</body>
</html>
以下のinputタグで、色を入力する項目をページに配置します。
<input type="color"/>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。カラーボックスがページに表示されます。
カラーボックスをマウスポインタでクリックします。クリックすると下図のカラーピッカーがポップアップ表示されます。
カラーの設定ができます。
カラーピッカーのポップアップウィンドウの外側の領域をクリック、
または、[Enter]キーを押すとポップアップダイアログが閉じ、カラーボックスに選択カラーが設定されます。
カラーボックスにラベルを表示する例です。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>カラーピッカーのデモ</h2>
<form>
<input type="color" id="colorInput" />
<label for="colorInput">カラー</label>
</form>
</body>
</html>
以下のinputタグで、色を入力する項目をページに配置します。ラベルを利用するため、id属性を設定しid名を設定します。
<input type="color" id="colorInput" />
labelタグを記述します。for属性に対応するコントロールのidを記述します。labelタグについてはこちらの記事も参照してください。
<label for="colorInput">カラー</label>
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ラベルの[カラー]の位置にマウスポインタを移動してクリックします。
ラベルの文字列部分をクリックした場合でも、下図のカラーピッカーダイアログがポップアップ表示されます。
カラーピッカーで選択職を変更できます。
カラーピッカーのポップアップウィンドウの外側の領域をクリック、
または、[Enter]キーを押すとポップアップダイアログが閉じ、カラーボックスに選択カラーが設定されます。
カラーボックスに初期カラーを設定する場合は、value属性を記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>カラーピッカーのデモ</h2>
<form>
<input type="color" id="colorInput" value="#7151a8"/>
<label for="colorInput">カラー</label>
</form>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。value属性に設定したカラーが初期カラーとして設定されています。
