masahirorの気まま記録簿

個人的な出来事や意見、生活などの記録を思うままにブログに記録

HTMLフォーム「リストボックス・コンボボックス※」の横幅指定

自宅で運用しているTVサーバーは、Webで「録画済番組一覧」が見れるのだが、その一覧に「コンボボックス」が使用されている。
通常、HTMLのコンボボックスは

<select size=1>
<option value="list1">リスト1</option>
<option value="list2">リスト2</option>
</select>

といったタグで記載する。すると、以下のようになる。

これは、「size」の値を2以上にすれば、リストボックスになる。「size」の数=リストボックスの行数になる。

<select size=3>
<option value="list1">リスト1</option>
<option value="list2">リスト2</option>
<option value="list2">リスト3</option>
<option value="list2">リスト4</option>
<option value="list2">リスト5リスト5</option>
</select>

これは以下のようになる。

ここまでは通常のやり方で問題ないのだが、前記のTVサーバーの「録画済番組一覧」は録画されたタイトル名がコンボボックスになるのだが、そのタイトル名が長いとボックスが画面からはみ出してしまう。
例えば、この前のめちゃイケスペシャルの録画タイトルは

めちゃ2イケてるッ!SP / 「S」オファーシリーズ第10弾!横峯さくらの父・良郎が岡村隆史に緊急オファー!!ゴルフ初心者の岡村がゴルフを始めることで次世代のゴルファーを誕生させるきっかけに▽良郎の地元・鹿児島へ急行!特設練習場で良郎の厳しい指導のもと岡村が猛特訓を開始!▽岡村がさくらと対決!初心者の岡村はプロとどこまで戦えるのか!?▽数取団にV6が登場(予)

と、番組説明付で設定されてしまい、これをそのままリストボックスにしてしまうと非常に長くなってしまう。どのようになるかは、以下サンプルを参照。

サンプル1 リストボックの場合(横幅未設定)
screenshot http://www.geocities.jp/masahiror/select/before.html
サンプル1 コンボボックスの場合(横幅未設定)
screenshot http://www.geocities.jp/masahiror/select/before_c.html

これではスクロールしにくい。特にコンボボックスは選び辛く大変。
どうしたものかとHTMLのタグリファレンスを見るが、先ほどの「size」で表示される行の数は指定できるが、横幅の指定は対応していない。一番長い項目の横幅に強制的になってしまうのだ。



そこで色々調べてみると、スタイルを設定すれば横幅の指定が可能ということが判明。
リストボックス・コンボボックスのタグ

<select>

の設定項目に、

style="width:XXX%;"

というスタイル設定を含める。ピクセル指定の場合だと、

<select size=3 style="width:300px;">

とすればよい。「%」やピクセルの値はページの構成に合わせて変更。文字の長さに関係なく、その幅になります。
具体的には、

<select size=3 style="width:30%";>
<option value="list1">リスト1</option>
<option value="list2">リスト2</option>
<option value="list2">リスト3</option>
<option value="list2">リスト4</option>
<option value="list2">リスト5リスト5</option>
</select>

とすれば、文字が長い場合も、画面からはみださない。上記のサンプルが設定することでどのようになるかは、以下サンプルを参照。(ちなみに、サンプルは「width:100%」で設定)

サンプル2 リストボックの場合(横幅設定済)
screenshot http://www.geocities.jp/masahiror/select/after.html
サンプル2 コンボボックスの場合(横幅設定済)
screenshot http://www.geocities.jp/masahiror/select/after_c.html

2つのサンプルの比較はこちら。

サンプル3 リストボックスの場合(1と2の比較)
screenshot http://www.geocities.jp/masahiror/select/hikaku.html

80%でのサンプル

ただし、はみ出した分の文字は見た目カットされてしまいますが、フォームで送信する内容には変化はありません。あくまで見た目の問題だけです。


もちろん、このスタイルは他にも設定可能で、縦幅を「行数」ではなく「ピクセル」や「%」で指定したいときも

<select size=3 style="height:100px;width:300px;">
<select size=3 style="height:50%;width:30%;">

とすればよい。
「%」で縦幅を指定する場合の利点は、「size」やピクセルだとウインドウのサイズによって画面のスクロールが発生するが、「%」であれば自動的にウインドウサイズに合わさってくれる。
これは便利。

※2008/12/31補足

文中で「コンボボックス」という表現を使っていましたが、正式には「リストボックス」と同一とのことです。
HTMLのこの形式のことを「コンボボックス」という表現を用いるのは間違いで、意味が異なってきます。

ドロップダウンリストまたはリストボックスを1行のテキストボックスと組み合わせたもので、ユーザーは値を直接入力することもできるし、既存のオプションから選択することもできる。

2行以上あるリストボックスと、あえてわけた言い方をするとすれば、この形式のことは「プルダウンメニュー」「ドロップダウンメニュー」という呼び方をするのが合っているようです。
コメント欄にてご指摘いただきました。“なまえ”さま、ありがとうございました。
# また一つ勉強になりました。
# 用語は正しく覚えないとだめですね。反省。