質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

10650閲覧

sectionごとにbackground-colorを変えたいのに色が変わらない…

bariko

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/04 02:26

こんにちは!

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記のタイポを直せばいいかと。

<secton><section>
</secton></section>

投稿2020/04/04 03:07

hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bariko

2020/04/04 03:14

すごく恥ずかしいです。昨日の夜からずっと悩んでいたのでとても助かりました。ありがとうございました!!!気をつけます…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問