てんぽ: ドロップダウンメニューの使いどころ

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

ドロップダウンメニューの使いどころ

2005年12月02日(金)

ドロップダウンメニュー、あるいはプルダウンメニュー、ドロップダウンリスト。単にプルダウンとも。

FC2ブログのカスタマイズの中でもメニューのドロップダウンリスト化は人気があるようで、共有テンプレでも採用しているものをよく目にします。 しかしドロップダウンメニューにも使いどころがあると思うのです。

長所
表示領域を節約できる。
短所
リストを表示させるまで選択肢(オプション)がわからない。

長所と短所を比べ、長所のほうが上回っていると判断できるならドロップダウンメニューは効果的です。 あるいは短所がほとんどなくなるような場合、たとえば都道府県を選ばせるメニューにはドロップダウンメニューは最適です。 この例で言えば、

  • 選択肢が十分多い(表示領域の節約は確かなメリットになる)
  • 選択肢があらかじめわかっている(短所がもはや短所ではない)

この特徴をナビゲーションメニューにも適用して考えると、 ドロップダウンメニューを「月別アーカイブ」に使うのは良さそうです。

月別アーカイブは多くなりがち(1年で12個)なのでドロップダウンリスト化する意味もありますし、 リストを表示させるまでもなく選択肢の予想はできます(「○年×月」であろうことはわかる。その数はわからないにしても)。

一方、「カテゴリ別アーカイブ」や「最近のエントリー」では、その数を自分で制御できるのであえて省スペース化する必要は小さいうえに、 リストを表示させてみないと選択肢がわからないというデメリットも顕在化します。

しかし、(FC2ブログで見られる)ドロップダウンメニューには別の大きな問題があります。 ページ移動にJavaScriptを必要とするのです。

ウェブページでユーザビリティ、アクセシビリティの観点を重要視するようになればなおさらのこと、リンク記述をJavaScriptで制御する場合は気をつけなければなりません。JavaScriptが動作しない環境や、そのスクリプトでエラーを出せば、ハイパーリンク自体が動作せず、ユーザーは見たい情報にたどり着けなくなります。

(中略)

HTML自体では制御不能なことが可能になるのがJavaScriptですが、基本的にそういったページ移動制御をJavaScript依存で記述してはいけない、ということです。最初からJavaScriptでの動作効果を作る前にまずノーマルな状況で動作するようにして、その上にJavaScript の効果を「重ねる」ようにします。

こういう配慮の行き届いたJavaScriptの使い方がされていないことが多いのが残念です。 JavaScriptは「あると便利」ならいいんですが、「ないと不便」では駄目だと思います。

ナビゲーションをJavaScriptを使ったドロップダウンメニューにするなら、HTMLソース上ではul要素などで普通に書いておき、 それをJavaScriptを使ってドロップダウンリストに書き直すというのが理想です。

#56
カテゴリ:HTML・CSS
タグ[ JavaScript ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/56-079867e2

<<URLは短く | スクリプト無しで月別アーカイブをドロップダウン化>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。