Hobby > デザイン実験室 > List

リストメニューの習作です.ページが重くなりすぎるので,各アイテムのスタイルシートを別ファイルに移しました.ダウンロードしてローカルで確認してください.

Listページのスタイルシート(アイテム用)
lmenus.css(utf-8の読み書きできるエディタが必要です)

プルダウン,フライアウト,アコーディオン,ポートフォリオの各リストを作るにあたってMSDNに解説のある「条件付きコメント Conditional Comments」がふんだんに使われています.これは<!--[if lte IE 6]>読み込ませたい内容<![endif]-->というように記述することで,閲覧者がどのブラウザを使っているのかによって読み込ませるHTMLをコントロールすることができるものです.Introductionではこの条件付きコメントのTipsに触れていますので,よろしければご参照ください.プルダウンとフライアウトの解説ページですこしだけ細かいところに突っ込んでいます.

説明の最後には各ブラウザででの,表示の可/不可を記載しました.(*)がついているものは何某かの不具合(軽微)があるものです.特定ブラウザ用のCSS hackは一切使っていないので,ここでは対応させられていないものでも,いくつかのハックを使えば対応させられるかもしれません.

  • 2009.4.30, 条件付きコメントの記述をIE8に対応させました.ただし各項目の[XHTML+CSS]で確認できるものは修正していないので,[if IE 7]の箇所を[if gte IE 7]と読み替えてください.

横置き型リスト

ノーマル

LI要素に"float: left;",A要素に"display: block;"を指定.a:hoverを追加してインタラクションを付加しています.また枠線はLI要素すべてに設定すると隣接箇所の太さが倍になってしまうので,UL要素の上下左,LI要素の右に設定しています.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

段違い

基本は横置きノーマルと同じ.LI要素を"position: relative;"にした上で,minus1やplus1などのクラスを使ってずらします.それとプラスアルファでマウスホバー時に表示位置を若干下げるようにしています.逆に上げることももちろんできます.また上下のマージンを上げ幅,下げ幅と同じかそれ以上にしておかないと直前・後の要素とかぶってしまうので,それだけ注意しておけば後は特に問題ないかと思います.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

高さ可変

高さが変わったときに文字の位置がずれてしまうのをline-height(行の高さ)を調整することで回避しています.各LI要素ごとに異なるクラスを設定すればそれぞれを異なる高さにすることも可能です.いまさらになって(07/07/16)気づきましたがIE6だとうまく動いてないですね.どうにかなるものでしょうか.

対応ブラウザ:IE6(*),IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

タブ型

オン・オフを切り替えるためのクラスactiveを設定しています.プラスアルファでa:hoverのインタラクションを与えてやるといい感じになるんじゃないかと思います.

設置する場所と位置に注意する他は特別な設定が必要になることもなく比較的容易に設置でき,CSSも横置きノーマルとほとんど同じなので,背景にどんな画像を使うか,マウスホバー時にどんな効果を付けるかといったところで魅せるのがいいんでしょうね.

画像を使うときのポイントとしては,UL要素にオフの時の画像を敷き詰め,オンの時の画像をclass="active"を指定したLIもしくはA要素に敷き詰めるのが楽ちんでオススメです.

ジェネレータやテンプレートがたくさんあるので,それを利用するなり参考にするのも手です.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML & CSS]

jump to pagetop

プルダウン

ややこしいです.MSDNの解説によれば[if lte IE 6]といったコメントを付けることによって条件に当てはまる(当てはまらない)ブラウザごとに読み込ませるHTMLをコントロールすることができます.ここではGecko系などのIE以外はそのまま,Trident(IE)系ではIE6以下の場合tableの中にリストを作るようにした2つの場合に分岐するようにコメントを付けています.IE6以下でtableを作っているのは無いとプルダウン,フライアウトともに全く表示されないため.また</table></a>としてtableタグ全てをaタグでくくっているのはIE6がA要素以外の:hoverに反応しないためです.IE7からはそれ以外の疑似要素:hoverにも(ほぼ)対応しています.

対応ブラウザ:IE6,IE7,Firefox2,Safari3 » [XHTML+CSS]

jump to pagetop

縦置き型リスト

ノーマル

普通のリストとほとんど変わりません.A要素に"display: block;"を指定するだけで実現できます.枠線は横置きノーマルと同じように考えて,UL要素の上左右,LI要素の下にそれぞれ指定しています.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

幅可変

ここに挙げているものの中では2番目に単純なもの(1番は縦置きノーマル)だと思われます.a:hoverに幅を変える指定を書いてやればそれだけで実現できます.他はノーマルと同じです.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

フライアウト

これもだいぶややこしいですが,基本的な構造はプルダウンと同じです.注意することの1つめは,フライアウトが直前のLI要素の上から数えて何番目からでるものなのかによって表示位置を変えてやることと.sub1,sub2,sub3やlv1,lv2,lv3などの適当な名前を付けておくと調整がしやすいと思います.2つめは,IE7の場合にのみLI要素に"float: left;"を指定しておく必要があります.これがないとフライアウトが出るLI要素直下に隙間ができてしまいます.3つめは,UL要素の幅をLI要素と同じにしておくこと.忘れるとフライアウトさせたときにおかしなことになります.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

ツールチップ付き

リストにマウスを載せるとツールチップが表示されるもので,円形配置でSPAN要素を使ったものの変形です.A要素内にSTRONGタグで括った通常の表示部分,SPANタグで括ったツールチップの部分(たぶんどっちでも構いません)の2つが記述されています.

ここでは縦置きリストの形にしていますが,LI要素にfloatをつければ(他にも若干の調整が必要ですが)横置きにもなりますし,ツールチップの表示位置も位置指定プロパティを使うことで好きな場所に表示させられます.またツールチップ部分は背景画像を使うなどして比較的自由にデザインすることが可能です.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

アコーディオン

考え方もマークアップもほとんどフライアウトと同じですが,アコーディオン風の折りたたみ効果をつけてみました.IE6とOpera9ではまともに表示されません.

どうしても変化が唐突な感が否めないので,経時的な変化が欲しい場合はjavascript(例えばjQuery + IEfjなど)の利用を考えた方がよいです.

また折りたたみがおそらくユーザーの期待通りの挙動ではないこと,後ろにくるコンテンツの位置が一緒にずれる可能性があることなど,扱いにくくなる要素があるので使いどころが難しいかもしれません.

対応ブラウザ:IE7,Firefox2,Safari3, Opera9.5b » [XHTML+CSS]

jump to pagetop

その他

タイルリスト

UL要素の幅と高さを並べたいタイルの数に従って設定(ここでは1つ49px*3+枠線の合計4pxなので151px)し,LI要素を"float: left;"にします.A要素は"display: block;",ホバー時の背景を"background: transparent;"にしてUL要素の背景色を表示させています.枠線はLI要素に"margin: 0 1px 1px 0;"です.面倒なのでここではやりませんが,LI要素に背景画像を使えばフォトアルバムみたいなこともできます.onMouseOverイベントを使って拡大した画像を表示させたりすると面白いかなと思います.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

円形配置メニュー

LI要素自体は幅と高さを0にしているので,実際に見えているのはA要素(の背景)だけ.配置についてはブラウザを問わず正しく表示されますが,IE6でのみ思った通りの挙動を実現できませんでした.スタイルシート自体はそれほど難しくなくて,面倒なのは頂点の位置計算だけです.ひと工夫したのは<li><a><span>文字列</span></a></li>としてマウスホバー時にだけSPAN内の文字列が表示されるようにしたところ.メニュー自体は背景画像を使って表示させておいて,SPANの中に説明を書くということができます(IE6では動きません).ついでに背景も:hoverを使って変えてやれば直感的なインターフェースを作れると思います.1つ気をつけないといけないのは,LIの並び順によってはSPANが最前面に出ない場合があること.したがって,順序を考えてLIを配置する必要があります.ここでは上から1 → 2 → 3 → 0 → 4 → 5 → 6という順序でLIを記述しています.

対応ブラウザ:IE6(*),IE7,Firefox2,Safari3,Opera9(*) » [XHTML+CSS]

jump to pagetop

ポートフォリオ風

IE6だと画像の配置が崩れます.そのうちなおしますが特に問題はないので放置するかもしれません.

メニュー部分とパネル部分との関係はフライアウトやプルダウンと同じように条件付きコメントを使ってマークアップしていますが,各メニューとパネルが一対一になっているぶん,単純で扱いやすいのではないかと思います.

パネル部分は画像が1列に収まる場合はul.container1,2列になる場合はul.container2というマークアップをしてUL要素の高さを変えています.値を適宜変えてやれば3列でも4列でも問題なく表示できるはず.画像は全てul.containerXの中にある<li>~</li>内に並べて記述してやればいいだけなのでmarginとpaddingあたりに気をつければ,他に注意することは特にありません.

対応ブラウザ:IE6(*),IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop