プルダウンメニューを装飾する
プルダウンメニューのメニュー項目は、スタイルシートを使えば装飾することができます。 項目の種類に応じて色分けすると、見やすいメニュー項目にできるでしょう。
メニュー項目を装飾するには、メニュー項目を作っているoption要素に対してスタイルを適用するだけです。
たとえば、以下のように記述すれば…
option {
background-color: #ffffcc;
color: red;
}
background-color: #ffffcc;
color: red;
}
すべてのメニュー項目の文字色が赤色になり、背景色が淡い黄色(#ffffcc)になります。
たいていは、メニュー項目の種類ごとに色分けをしたり、奇数行・偶数行で色分けをして見やすくするなどの装飾を行うでしょう。 色分けするには、以下のように記述します。
■classを使って装飾を分ける
項目ごとに色を変えたい場合は、適当なクラス名を付加して使い分けるのが良いでしょう。
option.reditem {
background-color: #ffffcc;
color: red;
}
option.blueitem {
background-color: #ccffcc;
color: blue;
}
background-color: #ffffcc;
color: red;
}
option.blueitem {
background-color: #ccffcc;
color: blue;
}
上記のスタイルシートでは、「背景が淡い黄色で文字色が赤色」のreditemクラスと、 「背景が淡い緑色で文字色が青色」のblueitemクラスを用意しています。
この場合、以下のような感じでHTMLのoption要素を記述することで、メニュー項目を2色に色分けできます。
<option value="(URL)" class="reditem">赤色メニュー項目</option>
<option value="(URL)" class="blueitem">青色メニュー項目</option>
<option value="(URL)" class="blueitem">青色メニュー項目</option>
■直接HTML中にスタイルを記述して装飾する
プルダウンメニューが1つしかなく、スタイルシートを別途記述するのが面倒なら、 以下のように、HTML中にstyle属性を使って直接装飾を記述することもできます。
<option value="(URL)" style="color:red; background-color:#ffffcc;">メニュー項目名</option>
この方法だと、1項目ずつスタイルを記述しなければならないので、同じ装飾の項目が多い場合には非効率的です。 しかし、項目数が少ない場合は、この方法でも問題はないでしょう。
おわりに
今回は、わずか1行（20文字）のJavaScriptで、ページ移動ができるプルダウンメニューを作る方法をご紹介致しました。 ぜひ、活用してみて下さい。
【関連記事】
