html5でmainタグを使うと背景色が消えてしまう

前提・実現したいこと

Dot installの「実践！スマートフォンサイトを作ろう」を行っています。
セマンティックなhtmlを書いたほうがいいという記事を読んだので、見本にはなかったのですがmainタグをつけてみました。
すると、bodyタグにつけている背景色が消えてしまいました。
これがなぜなのかを知りたいです。

発生している問題・エラーメッセージ

mainタグをつけると背景色が消える。
chromeで確認しています。
mainタグ自体がそういうものなのでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>My App</title>
6  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
7  <link rel="stylesheet" href="css/styles.css">
8  <meta name="viewport" content="width=device-width,initial-scale=1">
9</head>
10<body>
11  <header>
12    <div class="container">
13      <i id="open_menu" class="fas fa-bars"></i>
14      <h1>My App</h1>
15    </div>
16  </header>
17  <main>
18  <section class="features">
19    <div class="container">
20      <h1 class="section-title">Features</h1>
21      <section class="feature">
22        <img src="img/feature1.png">
23        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello.</p>
24      </section>
25      <section class="feature">
26        <img src="img/feature2.png">
27        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello.</p>
28      </section>
29      <section class="feature">
30        <img src="img/feature3.png">
31        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello.</p>
32      </section>
33    </div>
34  </section>
35
36  <section class="news">
37    <div class="container">
38      <h1 class="section-title">News</h1>
39      <article class="news-item">
40        <img src="img/news.png">
41        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
42      </article>
43      <article class="news-item">
44        <img src="img/news.png">
45        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
46      </article>
47      <article class="news-item">
48        <img src="img/news.png">
49        <p>hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
50      </article>
51    </div>
52  </section>
53</main>
54</body>
55</html>

css
1body {
2  background: #f8f8f8;
3  font-size: 14px;
4  font-family: Verdana, sans-serif;
5  margin: 0;
6  color: #333;
7}
8
9.container {
10  width: 90%;
11  margin: 0 auto;
12}
13
14p {
15  line-height: 2;
16}
17
18body > section {
19  padding: 60px 0;
20}
21
22body > section:nth-of-type(odd) {
23  background: #fff;
24}
25
26.section-title {
27  text-align: center;
28  font-weight: normal;
29  margin: 0 0 60px;
30}
31
32header h1 {
33  font-size: 28px;
34  font-weight: normal;
35}
36
37#open_menu {
38  float: right;
39  font-size: 24px;
40  cursor: pointer;
41}
42
43.feature img {
44  width: 100%;
45}
46
47.feature:not(:last-child) {
48  margin-bottom: 60px;
49}
50
51.news-item img {
52  width: 100%;
53}

試したこと

mainタグを付けたり外したりしてみた。

補足情報（FW/ツールのバージョンなど）

FiroProchainezo

2019/08/13 07:01

「bodyタグにつけている背景色が消えてしまいました。」というのは <section class="features">に色が反映されない、ということですか？

tttkkm

2019/08/13 07:12

そうです！ kariyaさんの答えで解決しました！ありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

CSSの書き方の問題です。

css
1body > section {
2  padding: 60px 0;
3}
4
5body > section:nth-of-type(odd) {
6  background: #fff;
7}

上記の不等号は「bodyタグ直下のsectionタグの・・・」という意味です。
mainタグをbodyタグ直下に配置して、sectionタグがmainタグの中に入ってしまったので、上記のスタイルが反映していない状態です。

参考URL：https://uxmilk.jp/8077

投稿2019/08/13 07:09

kariya

総合スコア75

tttkkm

2019/08/13 07:11

ありがとうございます！ main　> sectionにしたら治りました！そういうことだったんですね！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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