header,main,footerタグにおける背景色設定について web制作を勉強しているものです。

補足

---HTML--- <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/test.css"> <title>タイトル</title> </head> <body> <header> <h1>タイトル</h1> </header> <main> <h2>見出し</h2> <h3>章</h3> <h4>大項目</h4> <p>もしもしかめよ、かめさんよ。</p> <h5>中項目</h5> <h6>小項目</h6> <img src="test.jpg"> <a href="#"><img src="test.jpg" alt="画像リンクテスト"></a> </main> <footer> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <ul> </footer> </body> </html>

HTML、CSS | ホームページ作成16閲覧xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

0

すみません、文字数の関係でいびつになってしまいますが、質問の補足にHTMLを、以下にCSSを記載します。 ---CSS--- header { background: rgba(0,160,255,0.3); } main { background: rgba(0,255,160,0.3); } footer { background: rgba(255,160,0,0.3); }

ThanksImg質問者からのお礼コメント

原因をつきとめて下さり解決に導いていただきましたのでベストアンサーとさせていただきます。

お礼日時:4/21 17:55

その他の回答(1件)

0

>p 要素や h1~h6 要素に対して別の背景色を指定していませんか? おそらくこれではないでしょうか。 試しにCSSを下記のようにしてみたらどうなるのでしょう。 header { background: rgba(0, 160, 255, 0.3); } main { background: rgba(0, 255, 160, 0.3); } footer { background: rgba(255, 160, 0, 0.3); } h1 { background: rgba(0, 160, 255, 0.3); } h2, h3, h4, h5, h6, p { background: rgba(0, 255, 160, 0.3); }

そのようにすると当然ながら各要素に色がつきます。 しかし、要素と要素の間に白い空白がつくこととなるためmain要素全体に背景色がつくわけではありません。 なお、背景色は透過を設定していますが、今回の処理で新たに色がついた箇所と当初から色がついていたインライン要素で色の濃さは変わりありません。