人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLについての質問です。
select要素でマークアップするとプルダウンメニューが作成できるかと思います。
こちらのメニューが開いたときの高さは制御できるものでしょうか。
css、jsなど方法は問いません。

また高さが制御できないとして、ブラウザ依存でしょうか? OS依存でしょうか。

上記2点の質問に回答お願い致します。

●質問者: 副長
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML js OS SELECT
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● azumi1975
●0ポイント

http://www.tohoho-web.com/html/select.htm

SIZE属性を指定することで可能です。

◎質問者からの返答

>こちらのメニューが開いたときの高さは制御できるものでしょうか。

ですのでデフォルトの状態の事ではありません。

SIZE属性はデフォルト表示の複数行表示と認識しております。


2 ● goog20090901
●0ポイント

http://www.tagindex.com/stylesheet/form/width_height.html

◎質問者からの返答

Select要素の高さ指定は見あたりませんでした。


3 ● Reiaru
●100ポイント ベストアンサー

ドロップダウンリストは hwnd を持つウィンドウコントロールです。


従ってその制御は基本的に OS が行っていますが、実際には Windows API で変更する為の指示を与える事は可能です。

つまりブラウザ側がドロップダウンリストの項目最大数 (高さ) などを制御している (制御する権利を有している) という事になります。

(例えばこれは Visual Basic の例ですが、参考として → ComboBoxのリスト項目表示数を変更)


ですが、少なくとも HTML 構文としてそれを指示できるものは存在しません。

(※「その辺りの設定を変更できるブラウザ」ならば作る事は可能な筈ですが、少なくとも私は存在を知りません)


そこで JavaScript やら CSS で擬似的なメニューを用意したりする事となります。jQuery の一例を挙げておきます。


HTMLだけでは実現できないドロップダウンチェックリストの作成 - JavaScript:phpspot開発日誌


「いやいや、チェックボックスなんてのは要らない」と思うかもしれませんが、

実はこのドロップダウンには最大項目数と言いますか縦の長さの設定が存在するのです。

(上記のリンク先は 404 ですので、実際のダウンロードはこちら → http://code.google.com/p/dropdown-check-list/downloads/list)


例えば同梱の demo.html をこの様な感じにしますと、何 100 項目でも一気に展開するメニューにする事ができます。

 <p>
 <code>
 $("#s7").dropdownchecklist({ maxDropHeight: 500});
 </code>
 </p>
 <p>
 <select id="s7">
 <option>001</option>
 <option>002</option>

 <!-- 項目省略 -->

 <option>256</option>
 </select>
 </p>

ここからチェックボックスを無くす事自体はそう難しくは無いと思います (私はやっていない為、サンプルを提示できずに申し訳ありません)。


その他、こうした紹介記事もありますので参考にされてみて下さい。

手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル - ホームページを作る人のネタ帳

◎質問者からの返答

なるほど。やはりSelectはOS(ブラウザ)制御なんですね。

提示して頂いたJSについてですが、Select要素を元にdivやspanで別のメニューを作っている様です。

つまりはSelectの高さを直接操作するのは、簡単ではない、と言うことでしょうか。

参考になりました。ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ