ProgateのHTML&CSSで仕様書の通りになりません。

Progateで以下のコードでHTMLとCSSを書きました。
(HTML & CSS の道場中級レッスンです。)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <!-- ここでFont Awesomeを読み込んでください -->
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8  <link rel="stylesheet" href="stylesheet.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <div class = "all">
13    <div class = "background">
14      <div class = "header">
15        <div class = "header-content">
16          <img src = "https://prog-8.com/images/html/advanced/main_logo.png">
17          <a>ログイン</a>
18        </div>
19      </div>
20      <div class = "main">
21        <div class = "content">
22          <h1>LEARN TO CODE.</h1>
23          <h1>LEARN TO BE CREATIVE</h1>
24          <p>Progateはオンラインプログラミング学習サービスです。</p>
25          <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
26          <div class = "btn">
27            <a class = "enrollment">新規登録はこちら</a>
28            <p>or</p>
29            <a class = "facebook"><span class = "fa fa-facebook"></span>facebookで登録</a>
30            <a class = "twitter"><span class = "fa fa-twitter"></span>Twitterで登録</a>
31          </div>
32        </div>
33      </div>
34    </div>
35      <div class = "lesson-info">
36        <h2>Learn Where to Get Started!</h2>
37          <div class = "course">
38            <img src = "https://prog-8.com/images/html/advanced/html.png">
39            <p class = "lesson-name">HTML & CSS</p>
40            <p class = "explain">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
41          </div>
42          <div class = "course">
43            <img src = "https://prog-8.com/images/html/advanced/jQuery.png">
44            <p class = "lesson-name">JQuery</p>
45            <p class = "explain">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
46          </div>
47          <div class = "course">
48            <img src = "https://prog-8.com/images/html/advanced/ruby.png">
49            <p class = "lesson-name">Ruby</p>
50            <p class = "explain">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
51          </div>
52          <div class = "course">
53            <img src = "https://prog-8.com/images/html/advanced/php.png">
54            <p class = "lesson-name">PHP</p>
55            <p class = "explain">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
56          </div>
57      </div>
58  </div>
59</body>
60</html>

css
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからCSSを書いていきましょう */
21.background {
22  background-image: url(https://prog-8.com/images/html/advanced/top.png);
23  padding-top: 180px;
24  padding-bottom: 100px;
25  background-size: cover;
26}
27
28.header {
29  background-color: rgba(34, 49, 52, 0.9);
30  height: 65px;
31  position: absolute;
32  top: 0px;
33  left: 0px;
34  right: 0px;
35  position: fixed;
36}
37
38
39
40.header-content {
41  width: 1170px;
42  margin: 0 auto;
43}
44
45.header-content img {
46  width: 124px;
47  padding: 20px 0px;
48}
49
50.content {
51  width: 1170px;
52  margin: 0 auto;
53}
54
55.header a {
56  float: right;
57  line-height: 65px;
58  padding: 0 25px;
59  background-color: rgba(255, 255, 255, 0.3);
60  display: block;
61  color: white;
62  transition: all 0.5s;
63}
64
65.header a:hover {
66  background-color: rgba(255, 255, 255, 0.5);
67  cursor: pointer;
68}
69
70.content h1 {
71  font-size: 45px;
72  letter-spacing: 5px;
73  text-align: center;
74  color: white;
75  opacity: 0.7;
76}
77
78.content p {
79  text-align: center;
80  color: white;
81  opacity: 0.7;
82}
83
84.btn a {
85  display: inline-block;
86  padding: 8px 24px;
87  opacity: 0.8;
88  border-radius: 4px;
89}
90
91.btn a:hover {
92  opacity: 1;
93  cursor: pointer;
94}
95
96.btn span {
97  margin-right: 5px;
98}
99
100.btn {
101  margin-top: 30px;
102  text-align: center;
103  color: white;
104}
105
106.btn p {
107  margin-bottom: 15px;
108}
109
110.enrollment {
111  background-color: #239b76;
112  margin-bottom: 15px;
113}
114
115.facebook {
116  background-color: #3b5998;
117  margin-right: 10px;
118}
119
120.twitter {
121  background-color: #55acee;
122}
123
124.lesson-info {
125  height: 580px;
126  width: 1170px;
127  margin: 0px auto;
128}
129
130.lesson-info h2 {
131  font-weight: normal;
132  text-align: center;
133  margin-bottom: 50px;
134  color: #5f5d60;
135  margin-top: 80px;
136}
137
138.course {
139  float: left;
140  width: 25%;
141  text-align: center;
142  position: relative;
143}
144
145.course img {
146  margin-bottom: 15px;
147}
148
149.lesson-name {
150  position: absolute;
151  top: 90px;
152  right: 25%;
153  left: 25%;
154  color: white;
155}
156
157.explain {
158  width : 80%;
159  margin: 0px auto;
160}
161
162.explain {
163  font-size: 13px;
164  color: #b3aeb5;
165}

すると以下のようになり、見本と比べると下の部分の高さが異なってしまいます。

こちらが仕様書になります。

解決策が分かる方、原因の所在が分かる方がいらっしゃいましたらアドバイスを頂けたらと思います。

KAOsaka

2021/11/13 16:08

高さではなく背景色が違うように見えますが、背景色の指定は無いのでしょうか？

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

回答1件

おそらくmarginの相殺ではないでしょうか。
割とハマる方もいるようで、「margin 相殺」などで検索すると解説記事が結構でてくるはずです。

.lesson-infoと直下の子要素h2はどちらもmarginを指定していますが、親要素のmarginが相殺される形で子要素h2のmarginが適用されます。
h2のmargin-top:80pxは.lesson-infoの高さ580pxに含まれませんから、80px + 580px = 660pxとなって高さがオーバーしているのではないかと思います。

解決方法としてはh2の高さをpadding指定にするなどがあります。

親要素の中央配置については、body要素やallなどのラッパー要素にwidthとmarginを指定すると、各子要素で指定する必要がなくなります。必要に応じてmax-widthも一緒に指定すると便利ですよ。

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

投稿2021/11/17 15:22