Progate上級道場編です。レスポンシブスマホレイアウトでtext-align: leftが特定の要素に効きません。

前提

Progate上級道場編のレスポンシブについてです。
.top-wrpperクラスにtext-a;ign: leftを記述しても、<p>or</p>のみleftになりません。

実現したいこと

原因として、.btn-wrapperでtext-align: center;が指定されているためと、ここの過去質問で理解しました。
具体的にはCSSの優先順位の問題であるとのことです。

しかし、調べたところ、CSS優先順位に関してもあらゆる基準がありました。
今回はどの基準に該当して.btn-wrapperでtext-align: center;が優先されたのか理解できません。

.top-wrapperは祖先、.btn-wrapperは親要素のため、後者のほうが強いということでしょうか？

なぜ、.btn-wrapperが優先されるのか理由を教えていただきたいです。

該当のソースコード

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Progate</title>
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
8    <link rel="stylesheet" href="stylesheet.css">
9    <link rel="stylesheet" href="responsive.css">
10  </head>
11  <body>
12    <header>
13      <div class="container">
14        <div class="header-left">
15          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16        </div>
17        
18        <span class="fa fa-bars"></span>
19        <div class="header-right">
20          <a href="#">レッスン</a>
21          <a href="#">新規登録</a>
22          <a href="#" class="login">ログイン</a>
23        </div>
24      </div>
25    </header>
26    <div class="top-wrapper">
27      <div class="container">
28        <h1>LEARN TO CODE.</h1>
29        <h1>LEARN TO BE CREATIVE.</h1>
30        <p>Progateはオンラインプログラミング学習サービスです。</p>
31        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
32        <div class="btn-wrapper">
33          <a href="#" class="btn signup">新規登録はこちら</a>
34          <p>or</p>
35          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
36          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
37        </div>
38      </div>
39    </div>
40    <div class="lesson-wrapper">
41      <div class="container">
42        <div class="heading">
43          <h2>Learn Where to Get Started!</h2>
44        </div>
45        <div class="lessons">
46          <div class="lesson">
47            <div class="lesson-icon">
48              <img src="https://prog-8.com/images/html/advanced/html.png">
49              <p>HTML & CSS</p>
50            </div>
51            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
52          </div>
53          <div class="lesson">
54            <div class="lesson-icon">
55              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
56              <p>jQuery</p>
57            </div>
58            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
59          </div>
60          <div class="lesson">
61            <div class="lesson-icon">
62              <img src="https://prog-8.com/images/html/advanced/ruby.png">
63              <p>Ruby</p>
64            </div>
65            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
66          </div>
67          <div class="lesson">
68            <div class="lesson-icon">
69              <img src="https://prog-8.com/images/html/advanced/php.png">
70              <p>PHP</p>
71            </div>
72            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
73          </div>
74        </div>
75        
76      </div>
77    </div>
78    <div class="message-wrapper">
79      <div class="container">
80        <div class="heading">
81          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
82          <h3>Let's learn to code, learn to be creative!</h3>
83        </div>
84        <a href="#" class="btn message">さっそく開発する</a>
85      </div>
86    </div>
87    <footer>
88      <div class="container">
89        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
90        <p>Learn to code, learn to be creative.</p>
91      </div>
92    </footer>
93  </body>
94</html>

stylesheet.css
1/* -------------------- CSSは一番下から書き始めてください！ -------------------- */
2
3* {
4  box-sizing: border-box;
5}
6
7body {
8  margin: 0;
9  font-family: "Hiragino Kaku Gothic ProN";
10}
11
12a {
13  text-decoration: none;
14}
15
16.container {
17  max-width: 1170px;
18  width: 100%;
19  padding: 0 15px;
20  margin: 0 auto;
21}
22
23.top-wrapper {
24  padding: 180px 0 100px 0;
25  background-image: url(https://prog-8.com/images/html/advanced/top.png);
26  background-size: cover;
27  color: white;
28  text-align: center;
29}
30
31.top-wrapper h1 {
32  opacity: 0.7;
33  font-size: 45px;
34  letter-spacing: 5px;
35}
36
37.top-wrapper p {
38  opacity: 0.7;
39}
40
41.btn-wrapper {
42  text-align: center;
43  margin: 20px 0;
44}
45
46.btn-wrapper p {
47  margin: 10px 0;
48}
49
50.signup {
51  background-color: #239b76;
52}
53
54.facebook {
55  background-color: #3b5998;
56  margin-right: 10px;
57}
58
59.twitter {
60  background-color: #55acee;
61}
62
63.btn {
64  padding: 8px 24px;
65  color: white;
66  display: inline-block;
67  opacity: 0.8;
68  border-radius: 4px;
69  text-align: center;
70}
71
72.btn:hover {
73  opacity: 1;
74}
75
76.fa {
77  margin-right: 5px;
78}
79
80header {
81  height: 65px;
82  width: 100%;
83  background-color: rgba(34, 49, 52, 0.9);
84  position :fixed;
85  top: 0;
86  z-index: 10;
87}
88
89.logo {
90  width: 124px;
91  margin-top: 20px;
92}
93
94.header-left {
95  float: left;
96}
97
98.header-right {
99  float: right;
100  margin-right: -25px;
101}
102
103.header-right a {
104  line-height: 65px;
105  padding: 0 25px;
106  color: white;
107  display: block;
108  float: left;
109  transition: all 0.5s;
110}
111
112.header-right a:hover {
113  background-color: rgba(255, 255, 255, 0.3);
114}
115
116.lesson-wrapper {
117  padding-bottom: 80px;
118  padding-left: 5%;
119  padding-right: 5%;
120  background-color: #f7f7f7;
121  text-align: center;
122}
123
124.heading {
125  padding-top: 80px;
126  padding-bottom: 50px;
127  color: #5f5d60;
128}
129
130.heading h2 {
131  font-weight: normal;
132}
133
134.lesson {
135  float: left;
136  width: 25%;
137}
138
139.lesson-icon {
140  position: relative;
141}
142
143.lesson-icon p {
144  position: absolute;
145  top: 44%;
146  width: 100%;
147  color: white;
148}
149
150.text-contents {
151  width: 80%;
152  display: inline-block;
153  margin-top: 15px;
154  font-size: 13px;
155  color: #b3aeb5;
156}
157
158.heading h3 {
159  font-weight: normal;
160}
161
162.message-wrapper {
163  border-bottom: 1px solid #eee;
164  padding-bottom: 80px;
165  text-align: center;
166}
167
168.message {
169  padding: 15px 40px;
170  background-color: #5dca88;
171  box-shadow: 0 7px #1a7940;
172}
173
174.message:active {
175  position: relative;
176  top: 7px;
177  box-shadow: none;
178}
179
180footer img {
181  width: 125px;
182}
183
184footer p {
185  color: #b3aeb5;
186  font-size: 12px;
187}
188
189footer {
190  padding-top: 30px;
191  padding-bottom: 20px;
192}
193
194/* -------------------- CSSはここから追加していきましょう！ -------------------- */
195.fa-bars {
196  color: white;
197  float: right;
198  font-size: 25px;
199  padding: 21px 0;
200  display: none;
201}
202

responsive.css
1/* タブレット向けレイアウト */
2@media all and (max-width: 1000px) {
3  .top-wrapper h1 {
4    font-size: 32px;
5  }
6}
7
8/* モバイル向けレイアウト */
9@media all and (max-width: 670px) {
10.header-right {
11  display: none;
12}
13.top-wrapper {
14  text-align: left;
15}
16.top-wrapper h1 {
17    font-size: 24px;
18    /*text-align: left;*/
19  }
20  
21  .top-wrapper p {
22    font-size: 14px;
23    /*text-align: left;*/
24  }
25  .signup, .facebook, .twitter {
26    width: 100%;
27  }
28  .facebook {
29    margin-bottom: 10px;
30  }
31  .fa-bars {
32    display: block;
33  }
34}

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

回答1件

ベストアンサー

.top-wrapperは祖先、.btn-wrapperは親要素のため、後者のほうが強いということでしょうか？

はい、その通りです。「継承」は直接の親要素の値を参照します。

継承を理解する | カスケードと継承 - ウェブ開発を学ぶ | MDN

しかし、調べたところ、CSS優先順位に関してもあらゆる基準がありました。
今回はどの基準に該当して.btn-wrapperでtext-align: center;が優先されたのか理解できません。

おそらく「カスケード」のルールと混同しているのだと思います。

プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。それは大抵の場合、同じ要素に適用される可能性のある 2 つのルールを作ってしまったことに由来します。カスケードおよび、それと密接に関連する詳細度の概念は、そのような競合が存在する際のメカニズムです。……

このほかに重要なのは継承という概念です。一部の CSS プロパティは親要素の値をデフォルトで継承し、一方で継承しないものもあります。
カスケードと継承 - ウェブ開発を学ぶ | MDN

投稿2022/07/19 02:11