こんにちは!
bodyは白で、<section>ごとに背景色を変えるデザインを作りたいのですが、sectionにかけたbackground-colorプロパティが効かず苦戦しています。
html
1 <body> 2 <secton> 3 <div class="ttl"> 4 <h2>背景色が変わらないh2のタイトルタイトル</h2> 5 <p>pサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプルpサンプル</p> 6 </div> 7 </secton> 8 </body>
css
1section{ 2 background-color:red; 3} 4.ttl{ 5 max-width: 800px; 6 margin: 0 auto; 7 text-align: center; 8 background-color: azure; 9} 10 11h2{ 12 margin: 96px 0 32px 0; 13 text-align: center; 14 background-color: lightsteelblue; 15}
sectionの中に入っているh2やpはbackground-colorで色が変わるのですが、sectionタグの部分だけ、効きません。
bodyにbackground-colorをすれば背景色は変わりますが、bodyはデフォの白のままで、特定のsectionだけ背景色を変えたいです。
キャッシュクリアしても、ブラウザを変えてもやはり変わらないので私の書き方が悪いのかな、と思うのですが…
何か原因がわかる方がいらっしゃいましたら、ぜひ教えてください。
よろしくお願い致します。
↓↓↓↓↓↓検証用のcodepenを用意しました↓↓↓↓↓↓↓↓↓
https://codepen.io/bariko/pen/KKpLbVQ
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/04 03:14