HTML TIPS & TRICKS 2001/02

<SELECT>を制する

QUESTION 1　メニューを色分けせよ！

　インタラクティブなコンテンツには欠かせないフォーム要素であるオプション選択 （選択メニュー・プルダウンメニュー・ポップアップメニューと呼ばれることが多い。）は、 初期のHTMLから存在する定番要素ですが、 HTML3.2まではあまり機能的に満足できるものではありませんでした。 しかし、HTML4.0からは選択項目のグループ化に対応するなど、機能強化が計られています。
　今回は、CSSによって選択項目のデザインを変更します。 なお、出題された問題ではプルダウンメニューの色を変えるとなっていますが、 ぱっと見てわかるように選択メニューにしました。

select 01 select 02 select 03 select 04 select 05 select 06 select 07 select 08 select 09 select 10 select 11 select 12 select 13 select 14 select 15 select 16 select 17 select 18 select 19 select 20

01 <SELECT size="10">
02     <OPTION style="background-color:#FFFFFF;">select 01</OPTION>
03     <OPTION style="background-color:#F8F8F8;">select 02</OPTION>
   〜中略〜
20     <OPTION style="background-color:#707070;">select 19</OPTION>
21     <OPTION style="background-color:#686868;">select 20</OPTION>
22 </SELECT>

　SELECTのほうは特に変わったことはしていません。重要なのはOPTIONエレメントのstyle属性です。 これによって各項目のbackground-colorプロパティの値を設定しています。このサイトでは、基本的にはヘッダ部分でスタイルの定義をするのですが、 今回は個別定義と言うことで、タグに直接定義をしています。