HTMLページでカラー選択ボックス (カラーピッカー ダイアログ)を表示する - HTML
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]キーを押すとポップアップダイアログが閉じ、カラーボックスに選択カラーが設定されます。
実装例:Labelを表示する例
カラーボックスにラベルを表示する例です。
コード
以下の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属性に設定したカラーが初期カラーとして設定されています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
