今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
階層型メニューを制作する学習にて
htmlは
<div class="container"> <ul class="main"> <li> <a href="#">TOP</a> </li> <li> <a href="#">GALLERY</a> <ul class="sub"> <li><a href="#">PICTURE</a></li> <li><a href="#">PHOTO</a></li> <li><a href="#">OTHER</a></li> </ul> </li> <li> <a href="#">GUIDE</a> <ul class="sub"> <li><a href="#">FAQ</a></li> <li><a href="#">FORUM</a></li> </ul> </li> <li> <a href="#">OTHER</a> <ul class="sub"> <li><a href="#">BLOG</a></li> <li><a href="#">TWITTER</a></li> <li><a href="#">FACEBOOK</a></li> </ul> </li> <li> <a href="#">ABOUT</a> <ul class="sub"> <li><a href="#">COMPANY</a></li> <li><a href="#">RECRUIT</a></li> <li><a href="#">CONTACT US</a></li> </ul> </li> </ul> </div>
途中ですが2段階のメニュー画面を制作中です。
css
.container ul{ list-style:none; padding:0; } .container{ width:900px; margin:0 auto; } ul.main li{ width:150px; height:38px; text-align: center; line-height:38px; float:left; background-color: hotpink; background-image: url("../images/01_02/btn_off.png"); } ul.main li > a{ display: block; text-decoration: none; color:#fff; }
cssも途中の段階ですがここまでで質問があります。
ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:leftが設定されています。
ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているためでしょうか。
次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが、書籍にある下記cssを実装しなくてサブメニューがメインメニューに重なりませんでした。
ul.main::after{ content:""; display:block; clear:both; }
floatを指定した要素は浮いてしまうため親要素の高さが認識できなくなる問題があるのでclearfix実装しないとul.main、ul.subの高さは0になってしまうと思うのですが(実際にツールで確認すると高さは0になっている)
サブメニューがメインメニューに重ならないのはul.subの親要素がmainのliでsubのulの前にブロック要素に指定されていて高さも指定されているa要素の後に記述されているためメインメニューに重ならないのではないかと解釈したのですが自分の考えは間違っているのでしょうか。
上記の書籍の説明が「このままだとメニューがどんどん回り込んでしまうので以下のように
clearfix手法を用いる」とありますがサブメニューに対して必要な訳ではなくメインメニューの下に何かしらのコンテンツを記述する場合に必要になるのではないでしょうか。
cssも学習したてなので分からない事だらけなのでどなたかご指導いただけませんでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/21 04:25