- ベストアンサー
CSSでナビゲーションバーを作る方法
- CSSでナビゲーションバーを作る際、両端をそろえる方法について教えてください。
- ナビゲーションバーの幅を均等にするために%表示を使用しようとしていますがうまくいきません。どうすればよいでしょうか？
- また、Firefoxではうまく表示できてもInternet Explorerでは崩れます。対策はありますか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
とりあえずこんな感じでいけました。 必要ない部分が多かったのである程度変更していますが・・・ 今回の場合%で指定する意味があまりないのでpxでいいと思います。 widthまたはheightとそれに対応するpaddingまたはborderを併用するとIE6で問題が起こる可能性があるので、同時に指定しなくて済むようにしてみました。 liにfloatとwidthを与え、aにheightではなくline-height（垂直中央揃えにもなりますし）とborderを指定することでバグを回避してる感じです。 clearfixに関しては調べられた方が早いので説明は省きます。 <style type="text/css"> ul,li,a { margin:0; padding:0; } .menu:after { /* clearfix */ display:block; content:"."; height:0; visibility:hidden; clear:both; } .menu { width:800px; margin:auto; clear: left; font-size:13px; border-right: #DBDBDB 0px solid; border-left:#E3E3E3 0px solid; list-style:none; /* clearfix */ height:1%; overflow:hidden !important; overflow:visible; /*/*//*\*//*/ display:inline-table; /* */ } .menu li { float:left; width:200px; } .menu a { display:block; text-align:center; line-height:42px; /* メニューの高さはここで指定した高さ＋2px （border分） */ color: #482400; text-decoration:none; border: #FFCC66 1px solid; } <ul class="menu"> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> 今回は関係ないのでそのままにしておきましたが、font-size:13px;は%で指定された方が良いです。
その他の回答 (2)
#menu ul,li,aに関しては多分#menu ul, #menu li, #menu aのことだと思いますが大丈夫ですよ。
いくつか補足があると答えやすくなるように思います ・DOCTYPE宣言は何ですか？（もしくは指定していませんか？） ・横並びはfloatで行っていますか？ ・paddingやmarginはfloatを指定した要素に使用されていますか？
補足
回答ありがとうございます。 補足説明をさせていただきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 宣言は以上のように宣言をしております。 横並びは、floatで行っております。 ＞paddingやmarginはfloatを指定した要素に使用されていますか？ これに関しては、使用しています。 .menu{ width:800px; height:42px; line-height:20px; margin:auto; text-align:justify; clear: left; border-right: #DBDBDB 0px solid; border-left:#E3E3E3 0px solid; } .menu a, .menu a:link, .menu a:visited, .menu a:active{ height:42px; margin:0px 0px; padding:2px 31px; text-align:center; line-height:40px; display:block; float:left; font-size:13px; color: #482400; text-decoration:none; border: #FFCC66 1px solid; } というのも、質問が間違えていて、ulliで組んでおらず、ただ単にaで指定していただけでした。 div id="navi" の中に、a をいれ、リンクしている部分は横並びにfloatしていた形だったのですが、今後は、ulliで指定してやっていければと思っていますので、ulliで教えていただきたいです。 きちんとした補足ではないかもわかりませんが わかる範囲で教えていただければ幸いです。 ちなみに、下記リンクのようなナビゲーションバーをつけたいです。 http://www.biyou-hifuka.com/
補足
さっそく回答いただきましてありがとうございました！ ul,li,a { margin:0; padding:0; } の部分なのですが、仮に.menuを#menuとして #menu ul,li,a { margin:0; padding:0; } とした場合でもかまわないのでしょうか？ fontに関してのご指摘ありがとうございます☆ ただ、固定値にした理由としては、このナビゲーションバーでテキストを挿入する際、固定値にしておかないとナビがズレるといった不具合があったので、13ptとしておりました。 細部にいたるまで検証していただきまして本当にありがとうございます！