HTMLについての質問です。

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

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/11/30 18:55:31
  • 終了:2009/12/02 01:39:27

ベストアンサー

id:Reiaru No.3

Reiaru回答回数152ベストアンサー獲得回数382009/11/30 21:38:52

ポイント100pt

ドロップダウンリストは 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のドロップダウンメニューサンプル - ホームページを作る人のネタ帳

id:sumithsonian

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

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

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

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

2009/11/30 22:03:41

その他の回答(2件)

id:azumi1975 No.1

azumi1975回答回数337ベストアンサー獲得回数162009/11/30 18:59:21

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

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

id:sumithsonian

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

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

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

2009/11/30 19:16:17
id:goog20090901 No.2

goog20090901回答回数637ベストアンサー獲得回数172009/11/30 20:34:42

id:sumithsonian

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

2009/11/30 20:52:24
id:Reiaru No.3

Reiaru回答回数152ベストアンサー獲得回数382009/11/30 21:38:52ここでベストアンサー

ポイント100pt

ドロップダウンリストは 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のドロップダウンメニューサンプル - ホームページを作る人のネタ帳

id:sumithsonian

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

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

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

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

2009/11/30 22:03:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません