Progate中級道場編　CSSプロパティ親要素と子要素の継承に関する疑問点

前提・実現したいこと

HTML&CSS 道場コース中級編に取り組んでおり、その過程で親要素と子要素の継承に関する疑問点があり、
問い合わせします。

前提：
CSSプロパティには、親要素から子要素へ継承するプロパティと継承しないプロパティがあると理解してます。
例：color、font-size→子要素へ継承する、margin、width→子要素へ継承しない。
(参考URL：https://www.tagindex.com/stylesheet/properties/)

疑問点・確認点：
継承しないはずのプロパティが継承しているように見受けられる事象が発生しました。
親要素に継承しないプロパティ(marginやwidthなど)を指定しているが、子要素に継承しているように見受けられる。
理由がわかれば教えて頂きたく宜しくお願いします。

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

以下CSSにて1)(クラス：.lesson-text)と2)(クラス：.lesson-text p)の結果が同じになる。
子要素も指定している2)(.lesson-text p)を利用するのが正しいと考えているが、
なぜ、子要素を指定しない1)が2)と同じ結果になるのか理解できていない。

該当部分抜粋
CSS

.lesson-text {

  display: inline-block;
  width: 80%;
  margin-top: 15px;
  font-size: 13px;
  color:#b3aeb5;
  }
**.lesson-text p **{
    display: inline-block;
    width: 80%;
    margin-top: 15px;
  font-size: 13px;
  color:#b3aeb5;
  }

HTML

<div class="lesson-text"> <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div>

継承についての理解

継承するプロパティ

　 color:#b3aeb5;
font-size: 13px;

継承しないプロパティ
display:　inline-block;
width: 80%;
margin-top: 15px;

該当のソースコード

HTMLCSS
a)HTML　と　b)CSS の順になってます。該当部分は、a)HTML、b)CSSともに最後の方です。

HTMLCSS
1**a) HTML** 
2------------------------------------------------------------------------------------------
3<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="utf-8">
7  <title>Progate</title>
8  <!-- ここでFont Awesomeを読み込んでください -->
9  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
10  
11  <link rel="stylesheet" href="stylesheet.css">
12</head>
13
14
15
16<body>
17    <header>
18      <div class="container">
19        <div class="header-left">
20            <img src="https://prog-8.com/images/html/advanced/main_logo.png">
21        </div>
22        <div class="header-right">
23           <a href="#">ログイン</a>
24        </div>
25      </div>
26    </header>
27  <!-- ここにコードを書いていきましょう -->
28  <div class="top-wrapper">
29    <div class="container">
30      <div class="title">
31        <h1>LEARN TO CODE.</h1>
32        <h1>LEARN TO BE CREATIVE.</h1>
33        <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
34      </div>
35      <div class="btn signup">
36        <a href="#">新規登録はこちら</a>
37      </div>
38      <div class="topMemo">
39        <p>or</p>
40      </div>
41      <div class="btn facebook">
42        <i class="fa fa-facebook"></i>
43        <a href="#">Facebookで登録</a>
44      </div>
45      <div class="btn twitter">
46         <i class="fa fa-twitter"></i>
47        <a href="#">Twitterで登録</a>
48      </div>
49    </div>
50  </div>
51  
52  <div class="lessons-wrapper">
53    <div class="container">
54      <div class="heading">
55        <h2>Learn Where to Get Started!</h2>
56      <div class="lesson">
57        <div class="lesson-icon">
58          <img src="https://prog-8.com/images/html/advanced/html.png">
59          <p>HTML & CSS</p>
60        </div>
61        <div class="lesson-text">
62          <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
63        </div>
64      </div>  
65       <div class="lesson">
66        <div class="lesson-icon">
67          <img src="https://prog-8.com/images/html/advanced/jQuery.png">
68          <p>jQuery</p>
69        </div>
70        <div class="lesson-text">
71          <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
72        </div>
73      </div>  
74       <div class="lesson">
75        <div class="lesson-icon">
76          <img src="https://prog-8.com/images/html/advanced/ruby.png">
77          <p>Ruby</p>
78        </div>
79        <div class="lesson-text">
80          <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
81        </div>
82      </div>  
83       <div class="lesson">
84        <div class="lesson-icon">
85          <img src="https://prog-8.com/images/html/advanced/php.png">
86          <p>PHP</p>
87        </div>
88        <div class="lesson-text">
89          <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
90        </div>
91      </div>  
92      </div>
93    </div>
94    </div>
95</body>
96</html>
97
98
99
100**b) CSS**
101------------------------------------------------------------------------------------------------------------------------
102/* CSSのリセット（消さないでください） */
103html, body,
104ul, ol, li,
105h1, h2, h3, h4, h5, h6, p, div {
106  margin: 0;
107  padding: 0;
108}
109
110body {
111  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
112}
113
114li {
115  list-style: none;
116}
117
118a {
119  text-decoration: none;
120}
121
122/* ここからCSSを書いていきましょう */
123
124.top-wrapper {
125  background-image: url("https://prog-8.com/images/html/advanced/top.png");
126  background-size: cover;
127}
128
129.container {
130  width: 1170px;
131  margin: 0 auto;
132  text-align:center;
133}
134
135.title {
136  padding-top:180px;
137  color: white;
138  opacity: 0.7
139}
140
141.title h1 {
142  font-size: 45px;
143  letter-spacing: 5px;
144}
145
146.title p {
147  margin-bottom: 30px;
148}
149
150.btn {
151 display: inline-block;
152 color: white; 
153 padding: 8px 24px;
154 margin-top: 15px;
155 opacity: 0.8;
156 border-radius: 4px; 
157}
158
159.btn a {
160 color: inherit
161}
162
163.signup {
164 background-color: #239b76;
165}
166
167.facebook {
168  background-color:#3b5998;
169}
170
171.facebook a {
172  margin-left: 5px;
173}
174
175.twitter {
176  background-color:#55acee;
177  margin-left: 10px;
178  margin-bottom: 100px;
179}
180
181.twitter a {
182  margin-left: 5px;
183}
184
185.topMemo {
186  margin-top:15px;
187  color: white; 
188  opacity: 0.8;
189}
190
191header {
192  background-color: rgba(34, 49, 52, 0.9);
193  height: 65px;
194  position: fixed;
195  top: 0;
196  z-index: 10;
197  width: 100%;
198  
199}
200
201.header-left {
202  text-align:left;
203  padding :20px 0px;
204  float:left;
205}
206
207.header-left img {
208  width: 124px; 
209}
210
211.header-right {
212 text-align:right;
213 float:right;
214 background-color: rgba(255, 255, 255, 0.3);
215 line-height :65px;
216 padding: 0 25px;
217}
218
219.header-right a {
220  color: white;
221}
222
223.header-right:hover {
224  transition: all 0.5s;
225  background-color: rgba(255, 255, 255, 0.5);
226}
227
228.lessons-wrapper {
229  background-color:#f7f7f7;
230  height: 580px;
231}
232
233.heading {
234  padding-top: 80px;
235  color: #5f5d60;
236  font-weight: normal;
237} 
238
239.heading h2 {
240   font-weight: normal;
241}
242
243.lesson {
244  margin-top: 50px;
245  width:25%;
246  float: left;
247}
248
249.lesson-icon {
250  position: relative;
251}
252
253.lesson-icon p {
254  position: absolute;
255  top: 90px;
256  width:100%;
257  color: white;
258}
259
260.lesson-text {
261  display: inline-block;
262  width: 80%;
263  margin-top: 15px;
264  font-size: 13px;
265  color:#b3aeb5;
266}

### 試したこと

1)上記HTMLとCSSで再生された画面は以下の通りです。
赤囲みのテキストが該当箇所。
![イメージ説明](28f61d70d592e59d1790c0755e1d9cfa.png)
2).lesson-textと.lesson-text pとで記載を変更。 →結果同じ
3)其々のプロパティを一つづつ有効化、無効化をしていき、有効に働いているかを確認。→全て有効
4)検証ツールで継承、未継承確認。(以下画面)
　.lesson-textのプロパティ、display、width、margin-topは文字が薄くなっており、未継承のように
　見受けられる。実際の画面は親要素lesson-textの子要素pに継承されているように見える。
![イメージ説明](dcbeca6d83b80268eca493fbe5485d0f.jpeg)

Lhankor_Mhy

2021/07/28 01:29

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

JORS-M

2021/07/28 02:28

アドバイス有難うございます。記載変更してみました。

Lhankor_Mhy

2021/07/28 02:29

ご対応ありがとうございます

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

回答1件

ベストアンサー

親要素に継承しないプロパティ(marginやwidthなど)を指定しているが、子要素に継承しているように見受けられる。

そう見えているだけだと思います。
以下を追加してから、1）2）を比べてみてください。背景色の範囲が違うはずです。

css
1.lesson-text{
2  background: gray;
3}

投稿2021/07/28 02:12

Lhankor_Mhy

総合スコア36158

JORS-M

2021/07/29 02:15

連絡が遅れすいません。回答ありがとうざいました。アドバイス通りで、疑問はクリアーになりました。助かりました。継承して子要素で適用されているのではなく、単純に親要素で適用されているだけですね。今後、同様の事例の際は活用させて頂きます。

Lhankor_Mhy

2021/07/29 02:40

お役に立てたようで何よりです。背景色を変更するよりも、開発者ツールのComputedで確認した方が本来はお手軽ですので、お試しください。

JORS-M

2021/07/29 02:50

ありがとうございます。検証ツールのComputed見てみました。視覚的にわかりやすく、プロパティの情報が一目でわかり便利ですね。利用方法を調べて活用してみます。重ねて有難うございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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