- ベストアンサー
h1～ｈ6要素の背景色が範囲外までなってしまう
見出しの要素の背景色を「#ddffdd」にしたところ、<h3>～</h3>の部分だけでなく<p>～</p>の部分まで背景色が適用されてしまいました。 背景色は、見出し要素（h1～h6）にしか指定していないのですがなぜでしょうか？ 回答よろしくお願いします。 ソースは一部省略していますが、次の通りです。 ■HTML <div class="kukaku4"> <h3>■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> ■CSS h2, h3 { color: blue; background-color: #ddffdd; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私のところでは上記のソースで正しく（■説明という文字の行の 背景がパステルっぽい緑色で）表示されています。 > ソースは一部省略していますが、次の通りです。 たぶん省略された部分に問題があるのでは？ ありがちなのが、タグの閉じ忘れ、閉じ間違い（<h2>○○</h3>とか） あと、ＣＳＳの { } が閉じ忘れているなどでしょうか。
その他の回答 (1)
- gura_
- ベストアンサー率44% (749/1683)
こういうことですか、↓ <html> <head> <style type="text/css"> <!-- h2, h3 { color: blue; background-color: #ddffdd; } --> </style> </head> <body> 現在このようになっているので、↓ <div class="kukaku4"> <h3 style="display: block;">■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> このようにしたいということですか。↓ <div class="kukaku4"> <h3 style="display: inline;">■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> </body> </html>
お礼
原因が分かりました。CSSの「float: left」が原因でした。 ありがとうございました。
お礼
タグの閉じ忘れなどの記述の間違いはありませんでした。 原因が分かりました。CSSの「float: left」が原因でした。 ありがとうございました。