HTML TIPS & TRICKS 2001/02

<SELECT>を制する

QUESTION 2　メニューに画像を入れろ！

　CSS1にきちんと対応していれば、 オプション選択の項目に画像を入れることが出来ます。この機能を使えば、 今までのように黒丸やアラビア数字といった記号的文字ではなく、画像ファイルによるマーカーが使えます。 しかも、スクリプトによる複雑な処理は必要ありません。 HTMLも無駄のないすっきりしたものになります。

select 01 select 02 select 03 select 04 select 05

HTMLによる定義

01 <SELECT>
02     <OPTION>select 01</OPTION>
03     <OPTION>select 02</OPTION>
04     <OPTION>select 03</OPTION>
05     <OPTION>select 04</OPTION>
06     <OPTION>select 05</OPTION>
07 </SELECT>

　ご覧の通り、基本的なことしか記述していません。次のコードが重要です。

CSSによる定義

01 OPTION
02 {
03     display:list-item;
04     list-style-position:inside;
05     list-style-image:url(marker.gif);
06 }

L03 display

　項目をリスト項目として扱うようにしています。このプロパティの値によって、ブラウザによる表示などが変化します。

L04 list-style-position

　リスト項目のマーカーの位置を指定しています。このようにすることで、項目の頭にマーカーが入ります。 デフォルトの outside ではマーカーははみ出してしまいます。

L05 list-style-image

　マーカーとして使う画像ファイルを指定しています。指定のし方は background-image などと同じです。 画像サイズは項目の高さに影響するので、あまり高さのある画像は使用しないほうがいいでしょう。 基本的には、アイコン程度のサイズ（32*32）が限界だと思います。