SELECTタグで色を選択する場合のサンプル
色の選択をselectタグで行うとき、optionタグにはstyle属性が使用できます。
表示サンプル
サンプルコード
<select name="color"> <option value="#000000" style="background-color:#000000;color:#FFFFFF">#000000</option> <option value="#000033" style="background-color:#000033;color:#FFFFFF">#000033</option> <option value="#000066" style="background-color:#000066;color:#FFFFFF">#000066</option> <option value="#000099" style="background-color:#000099;color:#FFFFFF">#000099</option> <option value="#0000CC" style="background-color:#0000CC;color:#FFFFFF">#0000CC</option> <option value="#0000FF" style="background-color:#0000FF;color:#FFFFFF">#0000FF</option> <option value="#003300" style="background-color:#003300;color:#FFFFFF">#003300</option> <option value="#003333" style="background-color:#003333;color:#FFFFFF">#003333</option> <option value="#003366" style="background-color:#003366;color:#FFFFFF">#003366</option> <option value="#003399" style="background-color:#003399;color:#FFFFFF">#003399</option> <option value="#0033CC" style="background-color:#0033CC;color:#FFFFFF">#0033CC</option> <option value="#0033FF" style="background-color:#0033FF;color:#FFFFFF">#0033FF</option> <option value="#006600" style="background-color:#006600;color:#FFFFFF">#006600</option> <option value="#006633" style="background-color:#006633;color:#FFFFFF">#006633</option> <option value="#006666" style="background-color:#006666;color:#FFFFFF">#006666</option> <option value="#006699" style="background-color:#006699;color:#FFFFFF">#006699</option> <option value="#0066CC" style="background-color:#0066CC;color:#FFFFFF">#0066CC</option> <option value="#0066FF" style="background-color:#0066FF;color:#FFFFFF">#0066FF</option> <option value="#009900" style="background-color:#009900;color:#FFFFFF">#009900</option> <option value="#009933" style="background-color:#009933">#009933</option> <option value="#009966" style="background-color:#009966">#009966</option> <option value="#009999" style="background-color:#009999">#009999</option> <option value="#0099CC" style="background-color:#0099CC">#0099CC</option> <option value="#0099FF" style="background-color:#0099FF">#0099FF</option> <option value="#00CC00" style="background-color:#00CC00">#00CC00</option> <option value="#00CC33" style="background-color:#00CC33">#00CC33</option> <option value="#00CC66" style="background-color:#00CC66">#00CC66</option> <option value="#00CC99" style="background-color:#00CC99">#00CC99</option> <option value="#00CCCC" style="background-color:#00CCCC">#00CCCC</option> <option value="#00CCFF" style="background-color:#00CCFF">#00CCFF</option> <option value="#00FF00" style="background-color:#00FF00">#00FF00</option> <option value="#00FF33" style="background-color:#00FF33">#00FF33</option> <option value="#00FF66" style="background-color:#00FF66">#00FF66</option> <option value="#00FF99" style="background-color:#00FF99">#00FF99</option> <option value="#00FFCC" style="background-color:#00FFCC">#00FFCC</option> <option value="#00FFFF" style="background-color:#00FFFF">#00FFFF</option> <option value="#330000" style="background-color:#330000;color:#FFFFFF">#330000</option> <option value="#330033" style="background-color:#330033;color:#FFFFFF">#330033</option> <option value="#330066" style="background-color:#330066;color:#FFFFFF">#330066</option> <option value="#330099" style="background-color:#330099;color:#FFFFFF">#330099</option> <option value="#3300CC" style="background-color:#3300CC;color:#FFFFFF">#3300CC</option> <option value="#3300FF" style="background-color:#3300FF;color:#FFFFFF">#3300FF</option> <option value="#333300" style="background-color:#333300;color:#FFFFFF">#333300</option> <option value="#333333" style="background-color:#333333;color:#FFFFFF">#333333</option> <option value="#333366" style="background-color:#333366;color:#FFFFFF">#333366</option> <option value="#333399" style="background-color:#333399;color:#FFFFFF">#333399</option> <option value="#3333CC" style="background-color:#3333CC;color:#FFFFFF">#3333CC</option> <option value="#3333FF" style="background-color:#3333FF;color:#FFFFFF">#3333FF</option> <option value="#336600" style="background-color:#336600;color:#FFFFFF">#336600</option> <option value="#336633" style="background-color:#336633;color:#FFFFFF">#336633</option> <option value="#336666" style="background-color:#336666;color:#FFFFFF">#336666</option> <option value="#336699" style="background-color:#336699;color:#FFFFFF">#336699</option> <option value="#3366CC" style="background-color:#3366CC;color:#FFFFFF">#3366CC</option> <option value="#3366FF" style="background-color:#3366FF">#3366FF</option> <option value="#339900" style="background-color:#339900">#339900</option> <option value="#339933" style="background-color:#339933">#339933</option> <option value="#339966" style="background-color:#339966">#339966</option> <option value="#339999" style="background-color:#339999">#339999</option> <option value="#3399CC" style="background-color:#3399CC">#3399CC</option> <option value="#3399FF" style="background-color:#3399FF">#3399FF</option> <option value="#33CC00" style="background-color:#33CC00">#33CC00</option> <option value="#33CC33" style="background-color:#33CC33">#33CC33</option> <option value="#33CC66" style="background-color:#33CC66">#33CC66</option> <option value="#33CC99" style="background-color:#33CC99">#33CC99</option> <option value="#33CCCC" style="background-color:#33CCCC">#33CCCC</option> <option value="#33CCFF" style="background-color:#33CCFF">#33CCFF</option> <option value="#33FF00" style="background-color:#33FF00">#33FF00</option> <option value="#33FF33" style="background-color:#33FF33">#33FF33</option> <option value="#33FF66" style="background-color:#33FF66">#33FF66</option> <option value="#33FF99" style="background-color:#33FF99">#33FF99</option> <option value="#33FFCC" style="background-color:#33FFCC">#33FFCC</option> <option value="#33FFFF" style="background-color:#33FFFF">#33FFFF</option> <option value="#660000" style="background-color:#660000;color:#FFFFFF">#660000</option> <option value="#660033" style="background-color:#660033;color:#FFFFFF">#660033</option> <option value="#660066" style="background-color:#660066;color:#FFFFFF">#660066</option> <option value="#660099" style="background-color:#660099;color:#FFFFFF">#660099</option> <option value="#6600CC" style="background-color:#6600CC;color:#FFFFFF">#6600CC</option> <option value="#6600FF" style="background-color:#6600FF;color:#FFFFFF">#6600FF</option> <option value="#663300" style="background-color:#663300;color:#FFFFFF">#663300</option> <option value="#663333" style="background-color:#663333;color:#FFFFFF">#663333</option> <option value="#663366" style="background-color:#663366;color:#FFFFFF">#663366</option> <option value="#663399" style="background-color:#663399;color:#FFFFFF">#663399</option> <option value="#6633CC" style="background-color:#6633CC;color:#FFFFFF">#6633CC</option> <option value="#6633FF" style="background-color:#6633FF;color:#FFFFFF">#6633FF</option> <option value="#666600" style="background-color:#666600;color:#FFFFFF">#666600</option> <option value="#666633" style="background-color:#666633;color:#FFFFFF">#666633</option> <option value="#666666" style="background-color:#666666;color:#FFFFFF">#666666</option> <option value="#666699" style="background-color:#666699;color:#FFFFFF">#666699</option> <option value="#6666CC" style="background-color:#6666CC;color:#FFFFFF">#6666CC</option> <option value="#6666FF" style="background-color:#6666FF">#6666FF</option> <option value="#669900" style="background-color:#669900">#669900</option> <option value="#669933" style="background-color:#669933">#669933</option> <option value="#669966" style="background-color:#669966">#669966</option> <option value="#669999" style="background-color:#669999">#669999</option> <option value="#6699CC" style="background-color:#6699CC">#6699CC</option> <option value="#6699FF" style="background-color:#6699FF">#6699FF</option> <option value="#66CC00" style="background-color:#66CC00">#66CC00</option> <option value="#66CC33" style="background-color:#66CC33">#66CC33</option> <option value="#66CC66" style="background-color:#66CC66">#66CC66</option> <option value="#66CC99" style="background-color:#66CC99">#66CC99</option> <option value="#66CCCC" style="background-color:#66CCCC">#66CCCC</option> <option value="#66CCFF" style="background-color:#66CCFF">#66CCFF</option> <option value="#66FF00" style="background-color:#66FF00">#66FF00</option> <option value="#66FF33" style="background-color:#66FF33">#66FF33</option> <option value="#66FF66" style="background-color:#66FF66">#66FF66</option> <option value="#66FF99" style="background-color:#66FF99">#66FF99</option> <option value="#66FFCC" style="background-color:#66FFCC">#66FFCC</option> <option value="#66FFFF" style="background-color:#66FFFF">#66FFFF</option> <option value="#990000" style="background-color:#990000;color:#FFFFFF">#990000</option> <option value="#990033" style="background-color:#990033;color:#FFFFFF">#990033</option> <option value="#990066" style="background-color:#990066;color:#FFFFFF">#990066</option> <option value="#990099" style="background-color:#990099;color:#FFFFFF">#990099</option> <option value="#9900CC" style="background-color:#9900CC;color:#FFFFFF">#9900CC</option> <option value="#9900FF" style="background-color:#9900FF">#9900FF</option> <option value="#993300" style="background-color:#993300;color:#FFFFFF">#993300</option> <option value="#993333" style="background-color:#993333;color:#FFFFFF">#993333</option> <option value="#993366" style="background-color:#993366;color:#FFFFFF">#993366</option> <option value="#993399" style="background-color:#993399;color:#FFFFFF">#993399</option> <option value="#9933CC" style="background-color:#9933CC;color:#FFFFFF">#9933CC</option> <option value="#9933FF" style="background-color:#9933FF">#9933FF</option> <option value="#996600" style="background-color:#996600;color:#FFFFFF">#996600</option> <option value="#996633" style="background-color:#996633;color:#FFFFFF">#996633</option> <option value="#996666" style="background-color:#996666;color:#FFFFFF">#996666</option> <option value="#996699" style="background-color:#996699">#996699</option> <option value="#9966CC" style="background-color:#9966CC">#9966CC</option> <option value="#9966FF" style="background-color:#9966FF">#9966FF</option> <option value="#999900" style="background-color:#999900">#999900</option> <option value="#999933" style="background-color:#999933">#999933</option> <option value="#999966" style="background-color:#999966">#999966</option> <option value="#999999" style="background-color:#999999">#999999</option> <option value="#9999CC" style="background-color:#9999CC">#9999CC</option> <option value="#9999FF" style="background-color:#9999FF">#9999FF</option> <option value="#99CC00" style="background-color:#99CC00">#99CC00</option> <option value="#99CC33" style="background-color:#99CC33">#99CC33</option> <option value="#99CC66" style="background-color:#99CC66">#99CC66</option> <option value="#99CC99" style="background-color:#99CC99">#99CC99</option> <option value="#99CCCC" style="background-color:#99CCCC">#99CCCC</option> <option value="#99CCFF" style="background-color:#99CCFF">#99CCFF</option> <option value="#99FF00" style="background-color:#99FF00">#99FF00</option> <option value="#99FF33" style="background-color:#99FF33">#99FF33</option> <option value="#99FF66" style="background-color:#99FF66">#99FF66</option> <option value="#99FF99" style="background-color:#99FF99">#99FF99</option> <option value="#99FFCC" style="background-color:#99FFCC">#99FFCC</option> <option value="#99FFFF" style="background-color:#99FFFF">#99FFFF</option> <option value="#CC0000" style="background-color:#CC0000;color:#FFFFFF">#CC0000</option> <option value="#CC0033" style="background-color:#CC0033;color:#FFFFFF">#CC0033</option> <option value="#CC0066" style="background-color:#CC0066">#CC0066</option> <option value="#CC0099" style="background-color:#CC0099">#CC0099</option> <option value="#CC00CC" style="background-color:#CC00CC">#CC00CC</option> <option value="#CC00FF" style="background-color:#CC00FF">#CC00FF</option> <option value="#CC3300" style="background-color:#CC3300">#CC3300</option> <option value="#CC3333" style="background-color:#CC3333">#CC3333</option> <option value="#CC3366" style="background-color:#CC3366">#CC3366</option> <option value="#CC3399" style="background-color:#CC3399">#CC3399</option> <option value="#CC33CC" style="background-color:#CC33CC">#CC33CC</option> <option value="#CC33FF" style="background-color:#CC33FF">#CC33FF</option> <option value="#CC6600" style="background-color:#CC6600">#CC6600</option> <option value="#CC6633" style="background-color:#CC6633">#CC6633</option> <option value="#CC6666" style="background-color:#CC6666">#CC6666</option> <option value="#CC6699" style="background-color:#CC6699">#CC6699</option> <option value="#CC66CC" style="background-color:#CC66CC">#CC66CC</option> <option value="#CC66FF" style="background-color:#CC66FF">#CC66FF</option> <option value="#CC9900" style="background-color:#CC9900">#CC9900</option> <option value="#CC9933" style="background-color:#CC9933">#CC9933</option> <option value="#CC9966" style="background-color:#CC9966">#CC9966</option> <option value="#CC9999" style="background-color:#CC9999">#CC9999</option> <option value="#CC99CC" style="background-color:#CC99CC">#CC99CC</option> <option value="#CC99FF" style="background-color:#CC99FF">#CC99FF</option> <option value="#CCCC00" style="background-color:#CCCC00">#CCCC00</option> <option value="#CCCC33" style="background-color:#CCCC33">#CCCC33</option> <option value="#CCCC66" style="background-color:#CCCC66">#CCCC66</option> <option value="#CCCC99" style="background-color:#CCCC99">#CCCC99</option> <option value="#CCCCCC" style="background-color:#CCCCCC">#CCCCCC</option> <option value="#CCCCFF" style="background-color:#CCCCFF">#CCCCFF</option> <option value="#CCFF00" style="background-color:#CCFF00">#CCFF00</option> <option value="#CCFF33" style="background-color:#CCFF33">#CCFF33</option> <option value="#CCFF66" style="background-color:#CCFF66">#CCFF66</option> <option value="#CCFF99" style="background-color:#CCFF99">#CCFF99</option> <option value="#CCFFCC" style="background-color:#CCFFCC">#CCFFCC</option> <option value="#CCFFFF" style="background-color:#CCFFFF">#CCFFFF</option> <option value="#FF0000" style="background-color:#FF0000">#FF0000</option> <option value="#FF0033" style="background-color:#FF0033">#FF0033</option> <option value="#FF0066" style="background-color:#FF0066">#FF0066</option> <option value="#FF0099" style="background-color:#FF0099">#FF0099</option> <option value="#FF00CC" style="background-color:#FF00CC">#FF00CC</option> <option value="#FF00FF" style="background-color:#FF00FF">#FF00FF</option> <option value="#FF3300" style="background-color:#FF3300">#FF3300</option> <option value="#FF3333" style="background-color:#FF3333">#FF3333</option> <option value="#FF3366" style="background-color:#FF3366">#FF3366</option> <option value="#FF3399" style="background-color:#FF3399">#FF3399</option> <option value="#FF33CC" style="background-color:#FF33CC">#FF33CC</option> <option value="#FF33FF" style="background-color:#FF33FF">#FF33FF</option> <option value="#FF6600" style="background-color:#FF6600">#FF6600</option> <option value="#FF6633" style="background-color:#FF6633">#FF6633</option> <option value="#FF6666" style="background-color:#FF6666">#FF6666</option> <option value="#FF6699" style="background-color:#FF6699">#FF6699</option> <option value="#FF66CC" style="background-color:#FF66CC">#FF66CC</option> <option value="#FF66FF" style="background-color:#FF66FF">#FF66FF</option> <option value="#FF9900" style="background-color:#FF9900">#FF9900</option> <option value="#FF9933" style="background-color:#FF9933">#FF9933</option> <option value="#FF9966" style="background-color:#FF9966">#FF9966</option> <option value="#FF9999" style="background-color:#FF9999">#FF9999</option> <option value="#FF99CC" style="background-color:#FF99CC">#FF99CC</option> <option value="#FF99FF" style="background-color:#FF99FF">#FF99FF</option> <option value="#FFCC00" style="background-color:#FFCC00">#FFCC00</option> <option value="#FFCC33" style="background-color:#FFCC33">#FFCC33</option> <option value="#FFCC66" style="background-color:#FFCC66">#FFCC66</option> <option value="#FFCC99" style="background-color:#FFCC99">#FFCC99</option> <option value="#FFCCCC" style="background-color:#FFCCCC">#FFCCCC</option> <option value="#FFCCFF" style="background-color:#FFCCFF">#FFCCFF</option> <option value="#FFFF00" style="background-color:#FFFF00">#FFFF00</option> <option value="#FFFF33" style="background-color:#FFFF33">#FFFF33</option> <option value="#FFFF66" style="background-color:#FFFF66">#FFFF66</option> <option value="#FFFF99" style="background-color:#FFFF99">#FFFF99</option> <option value="#FFFFCC" style="background-color:#FFFFCC">#FFFFCC</option> <option value="#FFFFFF" style="background-color:#FFFFFF">#FFFFFF</option> </select>
関連記事
- HTMLソースの最後にコメントで『Quick Cache』とあるページ
- inputタグにhiddenで隠された__VIEWSTATEとは(通信の盗聴、値の改ざん、回線の圧迫)
- Twitterウィジェットのカスタマイズ(ウィジェット部分のHTML・CSS)
- 多言語対応テキストエディタの一覧
- サイトマップ(sitemap.xml)のつくり方とちょっとしたテクニック
- Windows7やWindowsVistaでTelnetを使用する方法
- ナインパッチとは(9-Patch)
- SSL(HTTPS)でファイルのダウンロードができない場合
- Google Chromeで一部の文字だけ四角記号に文字化けするときの対処法
- 特定のディレクトリのみベーシック認証を外す方法
- Firefox、Chromeなどで文字化けを防ぐ方法 ヘッダー情報に文字コードを指定
- BRタグが<br />と書ける理由 『<br> が <br /』で『</br> が >』になる
- DOCTYPE宣言/XML宣言
- htmlファイルのコメントに <!--# から始まるものは使用しないほうがいい
- IPアドレス制限とベーシック認証を併用する方法
- サブドメインにアンダーバーがあるとクッキーは使えない
- 会員専用ページを作る方法 (ベーシック認証 / Basic認証 / 基本認証)
- 都道府県を選択するときのサンプルコード (JISコード準拠)
- 生年月日などで年を選択するときのサンプルコード
- 連続する半角英数字を途中で自動改行させるには、​が使えます
- SSLの警告
- mailtoの使い方
- サンプルコード
- PHP
- Ruby
- JavaScript
- Perl [CGI]
- Java
- CSS [スタイルシート]
- JD-Eclipse 自動で逆コンパイルをすることができるプラグイン
- Google Chromeでテキストエリアtextareaのサイズ変更をさせない方法
- Softbankで絵文字を表示させる
- 位置情報・GPS情報の取得方法
- Lightboxの使い方
- 携帯電話端末の判別ライブラリ Net_UserAgent_Mobile
- Mantisのインストール
- VGA端末用に出力画像を拡大縮小する方法
スポンサーリンク
