margin, paddingの余白設計を訂正したい

前提・実現したいこと

オンラインレッスンにて画像で提示されたspサイトの例を、正しく真似して実装したいです。

「margin, paddingの余白設計が正しくない」と、添削されているのですが
どこが間違っているのか分からないので、教えていただけると助かります。

・TOPがピンク→ Lesson1
・TOPがオレンジ→ Lesson2

該当のソースコード

【Lesson1】

css
1@charset "UTF-8";
2
3.wrapper {
4background-color: #EEEEEE;
5}
6
7.top {
8  background-color: #ff1a6f;
9  height: 80px;
10  display: flex;
11  justify-content: space-between;
12  padding: 10px;
13  align-items: center;
14}
15
16.circle {
17  background-color: #fff;
18  width: 50px;
19  height: 50px;
20  border-radius: 50%;
21  float: left;
22}
23
24.top-square {
25  background-color: #fff;
26  width:30%;
27	height:50px;
28  border-radius: 9px;
29  float: right;
30}
31
32.content {
33  justify-content: space-between;
34  padding: 30px 20px;
35}
36
37.set {
38  display: flex;
39  margin-top: 20px;
40}
41
42.set:first-child {
43 margin-top: 0;
44}
45
46.right-square {
47  background-color: #fff;
48  margin-left: 20px;
49  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
50  border-radius: 9px;
51  height: 200px;
52  flex: 1;
53  margin-bottom: 20px;
54}
55
56.left-square {
57  background-color: #CCCCCC;
58  display: block;
59  border-radius: 9px;
60  width:90px;
61  height: 90px;
62}
63
64.fotter {
65  background-color: #000055;
66  height: 70px;
67}
68
69

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8    <link rel="stylesheet" href="../../../tools/style/reset.css" />
9    <link rel="stylesheet" href="./style.css" />
10    <title>div-puzzle-sp | lesson-1</title>
11  </head>
12   <body>
13    <div class="wrapper">
14    <div class="top">
15      <div class="circle"></div>
16      <div class="top-square"></div>
17    </div>
18    <ul class="content">
19      <li class="set">
20      <div class="left-square"></div>
21      <div class="right-square"></div>
22      </li>
23      <li class="set">
24      <div class="left-square"></div>
25      <div class="right-square"></div>
26      </li>
27      <li class="set">
28      <div class="left-square"></div>
29      <div class="right-square"></div>
30      </li>
31      <li class="set">
32      <div class="left-square"></div>
33      <div class="right-square"></div>
34      </li>
35    </ul>
36    <div class="fotter"></div>
37  </div>
38  </body>
39</html>
40

【Lesson2】

CSS
1@charset "UTF-8";
2
3.wrapper {
4background-color: #EEEEEE;
5}
6
7.top {
8  background-color: #ff8c00;
9  height: 90px;
10  display: flex;
11  justify-content: space-between;
12  padding: 10px;
13  align-items: center;
14  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
15}
16
17.top-square {
18  background-color: #fff;
19  width: 100px;
20  height: 60px;
21  border-radius: 9px;
22}
23
24.circle {
25  background-color: #fff;
26  width: 60px;
27  height: 60px;
28  border-radius: 50%;
29}
30
31.circle:first-child {
32  margin-right: 20px;
33}
34
35.set {
36  display: flex;
37  justify-content: space-around;
38}
39
40
41.content {
42  padding: 30px 15px;
43  display: flex;
44  flex-wrap: wrap;
45}
46
47.A {
48  background-color: #fff;
49  width: 150px;
50  height: 150px;
51  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
52  border-radius: 9px;
53  margin: 10px;
54}
55
56.fotter {
57  background-color: #000055;
58  height: 70px;
59}
60

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8    <link rel="stylesheet" href="../../../tools/style/reset.css" />
9    <link rel="stylesheet" href="./style.css" />
10    <title>div-puzzle-sp | lesson-2</title>
11  </head>
12  <body>
13    <div class="wrapper">
14      <div class="top">
15        <div class="top-square"></div>
16        <ul class="set">
17        <li class="circle"></li>
18        <li class="circle"></li>
19        </ul>
20      </div>
21      <ul class="content">
22        <li class="A"></li>
23        <li class="A"></li>
24        <li class="A"></li>
25        <li class="A"></li>
26        <li class="A"></li>
27        <li class="A"></li>
28        <li class="A"></li>
29      </ul>
30      <div class="fotter"></div>
31    </div>
32  </body>
33</html>
34

m.ts10806

2020/08/24 00:40

「設計したい」をどういう意味で使われていますか？文脈的には「実装」が正しそうに思うのですが。意図を教えてください。

m.ts10806

2020/08/24 00:40

あとコードは全てマークダウンのcode機能を利用してご提示ください。

Lhankor_Mhy

2020/08/24 01:47

HTMLをご提示ください。

退会済みユーザー

2020/08/24 14:13

・HTMLの追加、code機能で提示、変更しました。宜しくお願い致します！・実装したい、の間違いでした。ただ、先方には余白設計を見直せ、と言われております。。。

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

回答1件

ベストアンサー

ご提示のコードを試してみましたが、かなりルック＆フィールが違うので、修正を指摘されるのも仕方ないように思いました。
率直に申し上げると、anna004さんがこれらの差異について気になっていない、というのは驚きです。

Lesson1を見て気になったものを挙げてみます。

そもそものサイズ感がかなり違うように見えます。カンプはビューポート幅360pxを想定したものだと思いますが、そうするとtopの角丸は高さ30pxぐらいではないでしょうか？　height: 50px;はレッスンで指示されているのですか？
.circleの垂直余白が10px→25pxになっている。
.left-squareと.right-squareの余白が10px→20pxになっている。
.set間の余白が20px→40pxになっている。
.contentと.footerの余白が30px→50pxになっている。

大きなお世話かと思いますが、もしanna004さんがWEBデザイナーの仕事（に限らず、何かをデザインする仕事）をするおつもりであるならば、もう少し敏感になった方がいいかと思います。

投稿2020/08/25 06:33

Lhankor_Mhy

総合スコア36960