同じクラス名なのに片方には反映されていないのは何故ですか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>すごいアプリ</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <header>
10    <div class="container">
11      <h1>すごいアプリ</h1>
12      <p>ウルトラすごい最高なアプリです</p>
13      <div class="dabl">
14        <a href="" class="btn">ダウンロード</a>
15        <img src="img/top.png">
16      </div>
17    </div>
18  </header>
19  <section>
20    <h1>すごい特徴</h1>
21    <div class="main">
22      <section>
23        <img src="img/feature1.png">
24        <h2>すごい</h2>
25        <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
26      </section>
27      
28      <section>
29        <img src="img/feature2.png">
30        <h2>すごい</h2>
31        <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
32      </section>
33      
34      <section>
35        <img src="img/feature3.png">
36        <h2>すごい</h2>
37        <p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
38      </section>
39    </div>
40  </section>
41  <div class="member">
42    <h1>メンバー紹介</h1>
43    <ul>
44      <li>
45        <img src="img/member1.png">
46        <h2>山田太郎</h2>
47        <p>がんばります。がんばります。がんばります。</p>
48      </li>
49
50      <li>
51        <img src="img/member2.png">
52        <h2>山田二郎</h2>
53        <p>がんばります。がんばります。がんばります。</p>
54      </li>
55
56      <li>
57        <img src="img/member3.png">
58        <h2>山田花子</h2>
59        <p>がんばります。がんばります。がんばります。</p>
60      </li>
61    </ul>
62  </div>
63  <footer>
64    <h1>いますぐダウンロードしよう</h1>
65    <a href="" class="btn">ダウンロード</a>
66  </footer>
67</body>  
68</html>

CSS
1body {
2  margin: 0;
3}
4
5header {
6  background-color: orange;
7  color: #fff;
8  text-align: center;
9  padding-top: 64px;
10}
11
12.container h1 {
13  margin: 0;
14}
15
16.container p {
17  margin: 0;
18}
19
20.dabl {
21  display: flex;
22  flex-direction: column;
23}
24
25 .btn {
26  background-color: #fff;
27  color: orange;
28  width: 180px;
29  margin: 0 auto;
30  font-weight: bold;
31  padding: 10px 0;
32  border-radius: 4px;
33  text-decoration: none;
34  margin: 44px auto 48px;
35}
36
37.dabl .btn:hover {
38  opacity: 0.9;
39}
40
41.dabl img {
42  width: 300px;
43  margin: 0 auto;
44}
45
46section h1 {
47  font-weight: normal;
48  margin: 0;
49  padding: 80px 0 100px;
50  text-align: center;
51}
52
53section img {
54  width: 100%;
55}
56
57section h2 {
58  font-size: 22px;
59}
60
61section p {
62  line-height: 2.0;
63  /* background-color: pink; */
64  padding-bottom: 90px;
65}
66
67.main {
68  padding: 0 32px;
69}
70
71.member {
72  background-color: rgb(233, 233, 233);
73  text-align: center;
74}
75
76.member h1 {
77  margin: 0;
78  padding: 30px 0;
79}
80
81.member ul {
82  margin: 0;
83  padding: 0;
84  list-style: none;
85}
86
87.member li {
88  padding-bottom: 64px;
89}
90
91.member ul li img {
92  width: 160px;
93  border-radius: 50%;
94}
95
96li h2 {
97  margin: 0;
98  padding: 10px 0;
99}
100
101li p {
102  margin: 0;
103  padding-bottom: 12px;
104}
105
106footer {
107  background-color: orange;
108}
109
110footer h1 {
111  margin: 0;
112  padding-top: 80px;
113  padding-bottom: 25px;
114}

分からない事

上の画像のオレンジの部分がheaderで、下の画像のオレンジの部分がfooterです。
aタグであるダウンロードに.btnクラスをつけたのですが、
footerのダウンロードボタンには、backgroundcolorやcolorは反映されていますが、他のCSSが反映されていません。
どうして、反映されていないのですか？

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

回答1件

ベストアンサー

CSSプロパティには子孫に継承するものや、子要素に影響を与えるものがあります。

例えば、text-align は継承するプロパティです。
headerには text-align: center; が設定されているので、その子孫の.btn内のテキストはセンタリンクされますが、footerには設定されていないので、その子孫の.btn内のテキストはデフォルトの左寄せになります。

display: flex;は子要素のレイアウトに影響を与えるものです。display: flex;を設定された要素はフレックスコンテナとなり、その子要素はフレックスアイテムとなります。

ヘッダーの.btnの親要素にはdisplay: flex;が設定されているので、これはフレックスアイテムとなります。フレックスアイテムはブロック要素的な挙動になりるので、margin: 44px auto 48px;が効いて中央配置になります。
フッターの.btnの親要素にはdisplay: flex;が設定されていないので、a要素の本来のインライン性質のためmargin: 44px auto 48px;が効かないです。

フッターにも、同様のCSSを設定すればヘッダーと同じレイアウトになります。

css
1footer {
2  text-align: center;
3  display: flex;
4  flex-direction: column;
5}

投稿2021/03/30 14:08

hatena19

総合スコア34075

kirakira3003

2021/03/31 13:07

丁寧にご回答頂き、ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

同じクラス名なのに片方には反映されていないのは何故ですか？

分からない事

関連した質問