- ベストアンサー
html/CSSでBOX内にBOXを作り、異なる<h2>タグを設定したい方法
- html/CSSでネストされたBOX内に異なる<h2>タグを設定する方法について説明します。
- ネストされたBOX内でCSSの設定が反映される原因と、それを解決する方法をご紹介します。
- box1内とbox2内で異なる<h2>タグのスタイルを適用するには、CSSのセレクタを正確に指定する必要があります。
- okimuk2050
- お礼率90% (18/20)
- HTML
- 回答数3
- ありがとう数23
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
リンク先でもないのになぜ無駄なidを指定するのかわかりません。 classはともかく、スタイルシートのためだけのidなんて上書きもしにくいし、あとあとメンテナンスで泣くことになるよ。 詳細度や子孫、兄弟関係をうまく使おう。 下記は子孫セレクタをつかって二つのdivを見分けている。pについては隣接セレクタを使ってる。 idはむろん、classも一切使ってない。 参考書がまずいみたいですね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- p{text-indent:1em;margin:0ex 1em;line-height:3ex} h2{ font-size:2em; border-style:solid;border-width:0px 0px 2px 0px;} body div h2{color:red;border-color:red;} body div div h2{color:blue;border-color:blue;} p+p{background-color:rgb(200,200,200);} --> </style> </head> <body> <div> <h2>あああああ</h2> <p>ここはbody直下の汎用ブロック<p> <p>ここは二つ目以降の段落<p> <p>ここは二つ目以降の段落<p> <div> <h2>いいいいい</h2> <p>ここはdiv内のdiv内のブロック</p> </div> </div> </body>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞body div div h2{}というふうな使い方は初めて知りました。 これは子孫セレクタと言って、この場合は、単純セレクタ(要素名)の配下にある単純セレクタを次々に指定しています。単純セレクタは詳細度が1ですから、この指定では詳細度が4となり、body div h2{}の詳細度が3ですから、それを上書きします。 これはCSSの最も重要な部分と言ってもよいでしょう。カスケーディングとは継承という意味。もし、#を使って個別に指定していたら、ちょっと規模の大きいHTMLだと膨大なスタイルを書き連ねばなりません。#はひとつあたり詳細度100ですからね。 もちろんCSSだけでなく、HTMLも複雑・煩雑になってしまいます。 セレクタ 詳細度はプロパティを覚えるより先にきちんと覚えておかなきゃ・・・ セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) は仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )でも、プロパティより先に説明してある。
- naokita
- ベストアンサー率57% (1008/1745)
それが、反映されにのは、 CSS側が # ←これはID指定なのに、 HTML側で class になっているから何も効かないはず。 # ＝ ID . ＝ class （ここだけの単なるミスかな？） ----------------------------------- 但し、それを修正しても個別に反映こそするが、 box1でbox2に無い要素を指定したらbox2にも反映される。 例えば、CSSで #box1 h2{color:red;} を入れたら両方反映してしまう。 新旧のブラウザで、これを回避するには、 h2に個別の id や class を振る。 知っていると思いますが、 例 <h2 class="box1h2">box1のh2</h2> <h2 class="box2h2">box2のh2</h2> h2{ h2共通の指定 } .box1h2{ box1のh2の個別の指定 } .box2h2{ box2のh2の個別の指定 } -------------------------- NO.1さんの方法は綺麗でお手本となりますが、 初心者が使うと修正が大変なので、最初は個別指定が良いと思います。 最後に、 共通するCSSは共通させて、 纏めれる要素は纏めて最適化する。
お礼
なるほど。 セレクタの親子関係がうまくいってなかったんですね。 てか、body div div h2{}というふうな使い方は初めて知りました。 ありがとうございます。