- ベストアンサー
ドロップダウンメニューのCSSでの実装について
- Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。
- 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される、(2)テキスト分しか表示されない、きちんと画像全体を表示させたい！
- もしよろしければアドバイスお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。 :hoverしているのは、どの要素でしょう。そしてプルダウンメニュー上に:hoverしているときは、その要素の上にありますか？ ＞これはclearする必要はないのでしょうか？ なんのために？ここで、次に続く要素(回り込む要素)はどこにあるでしょう。 HTMLの構造を簡単に頭に入れて、CSSだけを上から順番に何を選択しているか、セレクタの書き方を読み取ってください。大事なことは理解することです。特に詳細度の計算だけは身につけること。先の回答で示した参照先はよく読んでください。回り道のようですが、実際はもっとも早い方法です。(急がば回れ)
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まあ、理屈さえ知っていれば簡単です。 position:absoluteは直近のstaticでない親コンテナブロックの位置を参照する。 ネット上のサンプルを見るときは、必ず仕様書と照らし合わせて、なぜそうなるかを理解しないと応用は利きません。無駄に時間を浪費するだけです。 ★いくつかの重要なポイント ・折角の【カスケーディング】スタイルシートです。【カスケーディング】はプロパティよりも重要です。 →6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) カスケーディングを理解していれば無用なclass名やidを書かなくて済みます。 ★HTMLはデザインにひこずられたらダメです。きちんと文書構造にしたがってマークアップしましょう。文書構造とプレゼンテーションを切り離すことがスタイルシートの最大の目的です。それが出来れば、後でデザインは自由に出来ます。 →2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) たとえば、サイト全体のナビゲーションは本文セクションに入るのはおかしいのでフッターに入れるべきですが、それでもサンプルのように希望通りデザインできます。 floatでデザインすれば、必ず本文ないしヘッダ直前に入れなければなりませんね。 下記サンプルは、HTML4.01strictです。(HTML5に変更するときは、doctypeを書き換えて、<div class="header">を<header>、同様に<section><nav><footer>にdiv要素を書き換える。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ★なお、＿に戻してください。詳しい説明はソースに書かれていますが、わからないときは仕様書を、まず確認すること。 ★ウィンド巾に関わらず中央に表示されます。i-hone,i-padには文字が小さくなりすぎるけど読めるはず・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;} div.header,div.section,div.footer,div.footer div.nav{ ＿width:720px;margin:0 auto; ＿border:solid 1px silver; } div.header{ ＿height:200px;/* ナビゲーションリンクの位置のため */ ＿margin-bottom:40px;/* ナビゲーションリンク用 */ ＿background-color:silver;/* サンプルのため */ } div.section{ ＿background-color:fuchsia;/* サンプルのため */ ＿min-height:300px; } div.footer div.nav{ ＿position:absolute;top:200px;height:40px;/* 置き場所とサイズを指定する。 */ ＿font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; ＿line-height:40px;/* 継承されるプロパティなので */ ＿text-align:center; ＿background-color:black;/* サンプルのため */ } div.footer ul,div.footer ul li{ ＿display:block;list-style:none;/* リストをブロックにする */ ＿margin:0;padding:0; } div.footer ul li{ ＿width:118px;float:left; ＿position:relative;/* 子孫要素の基準点 */ } div.footer ul li a{/* 子孫セレクタで下位のaにも適用、詳細度[0,0,1,4] */ ＿display:block; ＿width:100%;height:100%; ＿text-decoration:none; ＿color:#FFF; } div.footer ul li ul{ ＿font-size:75%; ＿position:absolute;top:40px;left:0;/* static以外の直近の親コンテナブロックを基準に */ ＿display:none; /* 消す */ } div.footer ul li ul li{ ＿height:60px;width:140px; ＿background-image:url(../images/dawnmenu_button.gif); } div.footer ul li:hover{/* 詳細度[0,0,2,3] */ ＿background-color:rgb(255,160,0); } div.footer ul li ul li:hover{/* 詳細度[0,0,2,5] */ ＿background-color:transparent;/* 前の設定を消す */ } div.footer ul li ul li a{/* 必要なもののみ上書き。詳細度[0,0,1,6] */ ＿padding-top:20px;/* 画像の吹き出し部分 */ } div.footer ul li:hover ul{ ＿display:block; } div.footer{ ＿background-color:yellow;/* サンプルのため */ } div.footer div.nav ul li:hover ul li+li:before{ /* おまけ */ ＿white-space:pre; ＿position:absolute; ＿top:-50px;left:150px; ＿padding:0.5em 1em; ＿width:auto;text-align:left; ＿border:dotted 1px gray; ＿background-color:white; ＿line-height:1.4em; ＿content:"Aボタンにマウスオンすると\A下部にダウンメニューが出てくるようにしたい。\Aダウンメニューはテキストリンク、でもbackground-image\Aで表現したい。"; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="nav"><!-- ナビゲーションはnav --> ＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/">TOP</a></li> ＿＿＿＿＿＿<li class="botanA"><a href="./profile">会社情報</a> ＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/index.html">会社概要</a></li> ＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/office.html">営業所</a></li> ＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="./B">Bボタン</a></li> ＿＿＿＿＿＿<li><a href="./C">Cボタン</a></li> ＿＿＿＿＿＿<li><a href="./D">Dボタン</a></li> ＿＿＿＿＿＿<li><a href="./E">Eボタン</a></li> ＿＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>
お礼
詳しい回答本当にありがとうございます。 実際のサンプルもとても参考になりました、感謝します。 詳細に説明くださったのに、カスケーディングという概念がいまいちよく分からなくて、リンクページも読ませていただきましたが、正直なところ？でした。申し訳ないです。 それでも、一応ORUKA1951さんのソースを参考にさせてもらいながら、記述してみたのが、以下のソースです。 ２点ほど疑問が出てきました。 (1) ORUKA1951さんのソースでは、その他のボタンと同じくドロップダウンボタンの記述ありの親ボタン、そしてul li ul liの第二階層のボタンどちらにもカーソルオンしている状態の時にも親要素のボタンはロールオーバーしていましたが、私の記述の仕方に問題ありなのでしょう、親ボタンの領域にカーソルオンした時はOKでしたが、ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。 これはどうしたら解決できるのでしょうか... (2) それと、#global_nav ul li のCSSでfloatしていますが、これはclearする必要はないのでしょうか？ もしよろしければ再度ご教授ください。 HTML--- <nav id="global_nav"> <ul> <li><a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="店舗紹介ボタン" class="btn"/></a> <ul> <li><a href="#">Aページ</a></li> <li><a href="#">Bページ</a></li> <li><a href="#">Cページ</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="ご利用案内ボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_09.gif" alt="説明ボタン" class="btn"/></a></li> <li><a href="blog.html"><img src="images/button_10.gif" alt="ブログボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_11.gif" alt="お問い合わせボタン" class="btn"/></a></li> </ul> </nav> CSS--- #global_nav { width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; border:0; } #global_nav ul, #global_nav ul li { list-style:none; display:block; margin:0; padding:0; } #global_nav ul li { width:120px; position:relative; float:left; } #global_nav ul li a { clear:both; display:block; width:100%; height:100%; } #global_nav ul li ul { display:none; position:absolute; top:52px;left:0; } #global_nav ul li ul li a{ width:120px; height:30px; color:#FFFFFF; font-size:0.75em; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; line-height:30px; text-align:center; background-image:url(../images/dawnmenu_button.gif); text-decoration:none; padding-top:0px; } #global_nav ul li ul li a:hover { background-image:url(../images/dawnmenu_button02.gif); } #global_nav ul li:hover ul{ display:block; } それと、今回記述しているDOCTYPEはXHTML1.0 Traditionalです。
- DrFell
- ベストアンサー率55% (305/551)
(1)ダウンメニューにしたいのにむしろ上部へ表示される この問題は再現されませんでした。他のｃｓｓの指定が継承されているものと思われます。試しに、ここに挙げたものだけで、独立したファイルを作り表示させてみてください。下に垂れると思います。 (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ #global_nav ul ul a { に対する指定ですよね？a要素はインライン要素です。つまり、高さや幅を持てませんので、heightやwidthに対する指定は無視されます。インライン要素とブロックレベル要素の違いの把握は重要です。基礎を復習してください。 で、この「#global_nav ul ul a {」内に、display:block;を入れるとheight:40px;width:120px;の画像でしたら表示されるようになるでしょう。html的にはインライン要素だけど、表示はブロックライン要素として表示するという意味です。
お礼
回答ありがとうございます！ display:blockこれか！ 非常に基礎的なことだと思いますが、いまいちこの要素の役割がよく分からなくて...でも今回の説明で復習することができました。 ありがとうございます!!
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLちゃんと書かなきゃ・・ <div class="nav"><!-- ナビゲーションはnav --> <ul> <li><a href="/">TOP</a></li> <li><a href="./profile">会社情報</a> <ul> <li><a href="./profile/index.html">会社概要</a></li> <li><a href="./profile/office.html">営業所</a></li> </ul> </li> <li><a href="./B">Bボタン</a></li> <li><a href="./C">Cボタン</a></li> <li><a href="./D">Dボタン></a></li> <li><a href="./E">Eボタン</a></li> </ul> </div> もちろん、画像でもよいが・・・ class名をnavにしたのは、HTML5では <nav id="global_nav"><!-- ナビゲーションはnav --> <ul> <li><a href="/">TOP</a></li> <li><a href="./profile">会社情報</a> <ul> <li><a href="./profile/index.html">会社概要</a></li> <li><a href="./profile/office.html">営業所</a></li> </ul> </li> <li><a href="./B">Bボタン</a></li> <li><a href="./C">Cボタン</a></li> <li><a href="./D">Dボタン></a></li> <li><a href="./E">Eボタン</a></li> </ul> </nav> と書かなければならないからです。 あとはスタイルシートを書くだけ。シンプルでしかも、どのようにでもデザインできます。デザインのためにHTMLを書くとHTMLもスタイルシートも複雑になる。そしてデザインを変えるときHTMLまで書き直さなきゃならなくなる。それじゃスタイルシートを導入する意味がない。 今晩は遅いので寝る。明日の夜にでも続きを
お礼
いつもありがとうございます。 ＞回り道のようですが、実際はもっとも早い方法です。 本当ですね、理解して記述するとしないのとでは応用力が全く違いますよね。基本的なところで足踏みしていますが、地道に勉強していきたいと思います。 ありがとうございました。