- 締切済み
子<DIV>で定義したのに、親<DIV>の定義が優先表示
CSS の 子<DIV>で定義したのに、親<DIV>の定義が優先表示されてしまう。 CSSファイルで #oya {font-size: 1em;} .kodomo {font-size: 20pt;} と定義。 HTMLファイルで <body> <div id="oya"> AAAAA <div class="kodomo"> BBBBB </div> </div> </body> としても、AAAAA と BBBBB は同じ文字サイズです。 BBBBBは、#kodomo 定義の文字サイズで表示したいのですが、 どうすればよいですか？
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
これは指定どおりに表示できますが、場合に寄ったら指定できない場合があります。 ご利用のCSSのマニュアルには詳細度の記述がないのではないかと思います。具体的に言うと、この子供要素のdivは、スタイルシートのためだけのclassだと思いますが、その場合はclass名自体不要なのです。 詳細度の説明がないCSSのマニュアルなんて、無意味です。 CSSでの#は一意セレクタ、.はクラスセレクタですから、前者は詳細度が100,後者は詳細度が10ですから、たとえば <div class="Note" id="Important"> というHTMLに対して、 .Note{}の指定と、#Important{}の指定では、後者が適用されるということです。 提示されたHTMLでも、CSSで div#oya {font-size: 1em;} div#oya div.kodomo {font-size: 20pt;} と指定していれば、上の詳細度は 101,下の詳細度は 112となりますから、どのようにスタイルシートを置こうと、必ず子要素の指定は適用されます。 言い換えると、HTMLは <div id="oya"> <div> <p>文章</p> </div> </div> という記述で済ませて、CSSを div#oya {font-size: 1em;} /* 詳細度101 */ div#oya div {font-size: 20pt;} /* 詳細度 102 */ で、適用されるわけです。 よく使う技法で、初心者の方のページを見ていると、やったらめったらclassやらidやら使われているページを見かけますが、次のようなシンプルなHTMLであっても、CSSでデザインできるということです。 <body> <h1>見出し</h1> <div class="content"> <h2>見出し(レベル２)</h2> <p>本文</p> <div id="siteMap"> <h2>見出し(レベル2)</h2> <p>・・・<strong>強調文字</strong>・・</p> <p>文章</p> </div> <div id="footNote"> <h2>見出し(レベル2)</h2> <p>・・・<strong>強調文字</strong>・・</p> <p>文章</p> </div> </div> </body> このような場合でも、 body div.content{} /*内容すべてに適用 */ body div.content div#siteMap strong{} body div.content div#footNote strong{} strong{font-dize:1.2em;} div strong{} ・・・これですべて個別に指定できる。絶対後々のメンテナンスも含めて簡単になるはずでしょ。もちろん省略して .content{} /*内容すべてに適用 */ #siteMap strong{} .content #footNote strong{} strong{font-dize:1.2em;} としても良いです。私は要素名は省略しないようにしてます。先でCSSの記述を追加したときに、想定外のところに適用されないために・・ div strong{}
- kirin_55
- ベストアンサー率16% (1/6)
下記を参考にして1emが何ptにあたるのか調べてみました。 16px=12pt=1em となります。 > AAAAA と BBBBB は同じ文字サイズ 指定する文字サイズが間違っているのではないかと思います。 px > em へ変換 http://riddle.pl/emcalc/ pt,pxについて http://www.geocities.jp/gakaibon/tips/others/pt2px.html
- askaaska
- ベストアンサー率35% (1455/4149)
<html> <head> <style> #oya {font-size: 1em;} .kodomo {font-size: 20pt;} </style> </head> <body> <div id="oya"> AAAAA <div class="kodomo"> BBBBB </div> </div> </body> </html> ちゃんと表示されたわよ。 質問に記述していない 何かもっと別のところに原因があるんじゃない？
お礼
CSSファイルを別にしたときに、間違った記述を していたようです。 ありがとうございました。
お礼
ORUKA1951さん 詳しい、ご説明ありがとうございました。 詳細度に対する対応が、まずかったのかな？と薄々 思っていましたが、なかなか分りやすい説明ページを みつけることができずにいました。 ORUKA1951さんの説明は、ベストです。 これからも参照させて貰います。