- 締切済み
css でのプルダウン子階層の色について
こんばんは。初心者で質問自体説明不足かもしれませんが、 どなたかご教授願えたら幸いです。 前回も似たような内容で教えていただいたんですが、 知識不足で少し変わると応用する事ができず、困っております（涙） ＣＳＳでサイトを制作しており、ＣＳＳでできる、 画像を使用した横型プルダウンメニュー（プルダウンは縦）を設置しました。 表示中のページがわかるように、 以下の様に、bodyにidをつけて、bacground-positionをマイナスして画像の下側を 表示させているのですが、子メニューが親メニューと一緒にpositionがマイナス されて、current時のボタン表示になってしまいます。 ****************************************** <body id="01"> <menu> <ul> <li id="menu1"><a href="#">menu</a> <ul> <li id="submenu1"><a href="#">submenu</a></li> <li id="submenu2"><a href="#">submenu</a></li> </ul> </li> </ul> </menu> </body> --------css---------------------------- #menu {width:835px; ～(etc)} #menu #menu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #current a {background-position:0 -40px;} #p01 #menu #menu1 a {background-position:0 -40px;} ****************************************************** 親メニューのボタンだけのpositionをマイナスにして、 子メニューは適用しない方法を教えて頂けますでしょうか・・・。 また、子メニューの方にも表示中のページをわかるようにするには、 どこにどのような記述をすればよかったでしょうか？ 上記のソースに何か追加や修正をしてできるものがあれば、 大変助かります。 説明不足ですみませんが、どうぞよろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞上記のソースに何か追加や修正をしてできるものがあれば、 不可能です。<menu>は、典型的な非推奨要素で、使うべきではありませんし、また決して<ul>と同居はしません。<menu>内には<ul>は入れられません!!!入るのは<li>のみです。本来<menu>は、内容の<li>をひとつの段落--改行なし---でレンダリングされるように計画されましたが、実際にはどのブラウザも<ul>と同じようにレンダリングします。 ＞current時のボタン表示になってしまいます。 currentを示すclass名がついていないので、いずれにしてもそのままのHTMLでは無理です。 #は一意セレクタと呼ばれるセレクタでひとつの文書内に一箇所しか存在し得ないし、詳細度も高いので、子孫セレクタとして記述する必要は基本的にありません。 以前も回答しましたが、HTMLは <div class="nav"><!-- ナビゲーションブロック --> <ul><!-- 順不同リストA --> <li><a href=""></a><!-- 項目a --> <ul><!-- 順不同リストB --> <li><!-- 項目b --><a href=""></a></li> <li class="current"><!-- 項目c --><a href=""></a></li> <li><a href=""></a><!-- 項目d --></li> </ul> </li> <li><a href=""></a><!-- 項目e --> <ul><!-- 順不同リストC --> <li><a href=""></a><!-- 項目f --></li> <li><a href=""></a><!-- 項目g --></li> <li><a href=""></a><!-- 項目h --></li> </ul> </li> </ul> </div> などになります。子供セレクタ>を使うと簡単なのですが、子供セレクタに対応していないIE6など古いブラウザを考えると、子孫セレクタで区別することになります。 ここで、 div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:30px;text-align:center;} /* すべての ul,liタイプをpadding,marginのないblockにしておきます。あわせてline-height,text-alignを指定しておく */ /* line-height,text-alignは継承されるプロパティ */ div.nav ul{width:100%;position:relative;} /* div.nav の子孫であるul--すなわち 順不同リストA,B,Cすべてに適用されます。詳細度[0,0,1,,]*/ /* div.nav>ul--子供セレクタを使うと順不同リストAのみ適用される --> /* relativeは、その子孫要素の巾の基準とするため */ div.nav ul li{width:20%;float:left;position:relative;} /* リストを横並びさせる 詳細度[0,0,1,2] */ /* この時点では、項目a-hすべてに適用される */ div.nav ul li a{display:block;width:100%;height:100%;background-image:url();} /* a要素をblockに変更してrelativeされている親要素のサイズを基準にheightとwidthを指定 */ div.nav ul li ul li{width:100%;float:none;} /* 二階層目のliについての設定 詳細度が[0,0,1,5]なので上書きされる */ /* この設定は項目b-d,f-gにのみ適用される */ div.nav ul li ul li a{background-position:0 -40px;} div.nav ul li ul{display:none;} /* 二階層目を消す 詳細度[0,0,1,4] */ div.nav ul li:hover ul{display:block;} /* 二階層目を見せる。擬似クラスを使っているので詳細度[0,0,2,4]で上書きされる */ div.nav ul li ul li.current a{} /* 詳細度[0,0,2,6] */ このように、より詳しく記述された要素--より高い詳細度での指定が優先されていきます。 */ HTMLもCSSも、ここで説明するにはあまりにも多すぎますが、いずれにしろ、仕様書には正確で的確な記述があります。必ず一度は目を通しておきましょう。前回の回答でも、きちんと説明してあったはずです。 ★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) →5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) →6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) なお、詳細度については現行のCSS2.1では変更になっています。 →6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<body><!-- idをつける必要はありません、必要ならclass名を --> <div class="nav"><!-- menueという要素はありません 文書構造を示すclass名をつけたdiv navはHTML5ではナビゲーションを示す要素として新設される。--> <ul> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> </ul> </div> </body> HTMLはこれだけで必要十分です。 #menu #submenu1のような書き方はしません。一意セレクタの対象となるIDは、ページ内の一箇所しか存在し得ないので、子孫セレクタで示す必要はありません。
お礼
こんにちは。前回に続き、お親切な回答をいつもありがとうございます（涙） まず、やっぱり基本的な知識がなっていないのですね・・・。 2010年に発行になっているある書籍を忠実に、多少（勝手な）アレンジを加えて作ったのですが、それ自体危ういのでしょうかね（汗） まだ、こんなに詳しく説明して頂いても、1つの書籍に頼って応用不足の為、今までやってきた記述と違うと「？」になる所が多々あるので、教えて頂いたリンク先をよく読ませて頂いて、今後の為にもORUKA1951さんのソースをしっかり理解したいと思います。プリントアウトして、勉強させて頂きます（笑） 本当にいつも、詳しくご説明頂き、感謝致します・・・。