①サービス部のレイアウト（テキストとイメージの余白）　②お問い合わせが中央にこない

前提・実現したいこと

①サービス部のレイアウト（テキストとイメージの間に余白）をそれぞれ70px

②お問い合わせが中央に来ない

どちらも自分でやったときはできたはずなのですが、解答のやり方にそってやろうと思うとどうにもわからなくなってしまいます。。。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>模写テイク2</title>
11</head>
12
13<body>
14 <header class="header">
15
16  <h1 class="site-title"><a href="./">クリ★スタ</a></h1>
17  <!--   <a href="#" class="header-title">クリ★スタ</a>-->
18  <div class="nav-wrapper">
19   <nav class="header-nav">
20    <ul class="nav-list">
21     <!--    href のなかの書き方-->
22     <li class="nav-item"><a href="#about">About</a></li>
23     <li class="nav-item"><a href="#blog">Service</a></li>
24     <li class="nav-item"><a href="#access">Contents</a></li>
25    </ul>
26   </nav>
27
28  </div>
29  <!--  全然かけなかったボタン-->
30  <button class="burger-btn">
31   <span class="fa-bars">
32    <span class="bar bar-top"></span>
33    <span class="bar bar-mid"></span>
34    <span class="bar bar-button"></span>
35   </span>
36  </button>
37 </header>
38 <main>
39  <div class="main-visial">
40   <h1 class="kv-copy">Cresta.design</h1>
41  </div>
42
43
44
45  <!-- アバウト-->
46  <section class="about section-wrapper">
47   <h2 class="section-title">About</h2>
48   <h3 class="sub-title">ミニマルで<br>洗練されたデザインを。</h3>
49   <p class="section-text">近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
50  </section>
51
52  <!-- サービス-->
53  <section class="service section-wrapper">
54   <h2 class="section-title">Service</h2>
55   <div class="content-wrapper">
56    <div class="content-item">
57     <div class="content-img"><img src="img/service-image@2x.jpg" alt="一眼レフ"></div>
58     <div class="content-text-section">
59      <h3 class="sub-title">リリース時のサポートで<br>サービスのブランディングを</h3>
60      <p class="content-text">弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
61     </div>
62    </div>
63    <div class="content-item reverse">
64     <div class="content-img"><img src="img/service-image02@2x.jpg" alt="アイフォン"></div>
65     <div class="content-text-section">
66      <h3 class="sub-title">リリース後のサポートで<br>効果を最大化させる</h3>
67      <p class="content-text">弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
68     </div>
69    </div>
70   </div>
71  </section>
72  <!--ニュース-->
73  <section class="news section-wrapper">
74   <h2 class="section-title">Contents</h2>
75   <div class="news-list">
76    <div class="news-card">
77     <div class="news-img"><img class="card-img" src="img/card-image1@2x.jpg" alt="アイフォン"></div>
78     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
79    </div>
80    <div class="news-card">
81     <div class="news-img"><img class="card-img" src="img/card-image2@2x.jpg" alt="アイフォン"></div>
82     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
83    </div>
84    <div class="news-card">
85     <div class="news-img"><img class="card-img" src="img/card-image3@2x.jpg" alt="アイフォン"></div>
86     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
87    </div>
88   </div>
89  </section>
90  <!-- お問い合わせ-->
91
92  <div class="section-wrapper">
93   <section class="contact-wrapper">
94    <h2 class="contact-title">お問い合わせ</h2>
95    <ul class="contact-list">
96     <li class="contact-form mei">
97      <p>担当者名</p><input type="text">
98     </li>
99     <li class="contact-form tel">
100      <p>電話番号</p><input type="tel">
101     </li>
102     <li class="contact-form mail">
103      <p>メールアドレス</p><input type="email">
104     </li>
105     <li class="contact-form mail">
106      <p>お問い合わせ内容</p><textarea></textarea>
107     </li>
108    </ul>
109    <input class="btn" type="submit" value="送信">
110   </section>
111  </div>
112 </main>
113 <footer>
114  <small> ©︎crest.design all rights reserved</small>
115
116 </footer>
117</body>
118
119</html>
120

該当のソースコード

CSS
1@charset "UTF-8";
2/*ヘッダーフッター送信ボタン*/
3/*ニュースの枠線など*/
4/*共通レイアウト*/
5/*html {
6 font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
7 font-size: 0.8rem;
8 /*letter-spacing: 30px;*/
9/* color: $text-black;*/
10html {
11  font-size: 62.5%;
12  /*フォントサイズを簡潔に計算しやすくするため*/
13}
14html body {
15  color: #141414;
16  font-size: 1.4rem;
17  line-height: 1.8;
18  letter-spacing: 0.05em;
19  /*変換表でXDの「0.7px」を変換した0.043の四捨五入*/
20  /*和文フォントの目安高さ*/
21  /*  .wrapper {
22   margin: 0 auto;
23   padding: 0 10% 20px;
24   text-align: center;
25  }*/
26}
27html body img {
28  max-width: 100%;
29  vertical-align: bottom;
30}
31html body a {
32  text-decoration: none;
33  color: #FFFFFF;
34}
35html body .section-title {
36  font-size: 3.6rem;
37  font-weight: bold;
38  margin-top: 150px;
39  margin-bottom: 70px;
40  letter-spacing: 0.05em;
41  /*（文字間「1.8」÷フォントサイズ「36px」）=0.05em*/
42  text-align: center;
43  /*まん中に寄せる*/
44}
45html body h3 {
46  font-weight: bold;
47  letter-spacing: 0.1em;
48  /*文字間「2.4」÷フォントサイズ「24」=0.1em*/
49  margin-bottom: 40px;
50  font-size: 2.4rem;
51}
52html body .section-wrapper {
53  padding: 100px 10% 50px;
54}
55
56/*ヘッダー*/
57header {
58  background-color: #1B1310;
59  border-bottom: 1px solid #FFFFFF;
60  line-height: 74px;
61  display: flex;
62  justify-content: space-between;
63  align-items: center;
64  padding: 0 120px;
65}
66header .nav-list {
67  display: flex;
68}
69header .nav-list .nav-item {
70  /*margin-left: 55px;*/
71  margin-right: 55px;
72  /*margin-rightの分だけ左に寄ってしまうからmargin-leftで余白を作るようにする*/
73}
74header .nav-list .nav-item:last-of-type {
75  padding-right: 0;
76}
77header .burger-btn {
78  display: none;
79}
80
81/*メインビジュアル*/
82.main-visial {
83  height: 90vh;
84  /*ビューポートの高さを基準にした高さ　どこから90を導いてきたのか*/
85  background-image: url(../img/fv-bgi@2x.jpg);
86  background-size: cover;
87  background-position: center;
88  /*padding: 300px 0;*/
89  display: flex;
90  /*写真と同じ幅いっぱいに伸びていた枠線が指定した幅になる*/
91  justify-content: center;
92  /*ど真ん中に配置*/
93  align-items: center;
94  flex-direction: column;
95}
96.main-visial .kv-copy {
97  color: #FFFFFF;
98  border: 2px solid #FFFFFF;
99  /* text-align: center;*/
100  font-size: 5rem;
101  /*なぜフォントサイズ5rem*/
102  font-weight: bold;
103  padding: 34px 42px;
104  /*枠内部の余白*/
105}
106
107/*アバウト*/
108.about {
109  text-align: left;
110  display: inline-block;
111}
112/*サービス*/
113.content-text-section,
114.content-img {
115  width: 480px;
116  /*画像とテキストの幅が480になる*/
117}
118
119.content-item {
120  display: flex;
121  align-items: center;
122  /*写真の高さでまんなかにする*/
123  justify-content: space-between;
124  /*めいっぱいに広がる*/
125  flex-wrap: wrap;
126}
127.content-item .content-text-section1 {
128  padding-left: 0.7rem;
129}
130
131.reverse {
132  flex-direction: row-reverse;
133  /*二つ目の要素のみ逆転する*/
134  margin-top: 70px;
135}
136.reverse .content-text-section {
137  padding-right: 70px;
138}
139
140/*ニュース*/
141.news .news-list {
142  display: flex;
143  justify-content: center;
144}
145.news .news-list .news-card {
146  box-shadow: 0 0 6px #1B131066;
147  width: 320px;
148  margin-right: 35px;
149}
150.news .news-list .news-card .news-text {
151  width: 255px;
152  text-align: center;
153  line-height: 25px;
154  margin: 25px auto;
155}
156.news .news-list .news-card:last-of-type {
157  padding-right: 0;
158}
159
160/*お問い合わせ*/
161.contact-wrapper {
162  /*display: inline-block;*/
163  /*フォームのマックスの長さ*/
164  margin: 0 auto;
165  /*ボタン*/
166}
167.contact-wrapper .contact-title {
168  font-size: 24px;
169  font-weight: bold;
170  margin-top: 150px;
171  margin-bottom: 72px;
172}
173.contact-wrapper .contact-list {
174  max-width: 700px;
175}
176.contact-wrapper .contact-list .contact-form {
177  width: 100%;
178  margin: 0 auto;
179}
180.contact-wrapper .contact-list .contact-form p {
181  text-align: left;
182}
183.contact-wrapper .btn {
184  background-color: #1B1310;
185  color: #FFFFFF;
186  font-size: 2rem;
187  /*フォントサイズはrem*/
188  /*border-radius: 51px;*/
189  border-radius: 30px;
190  font-weight: bold;
191  /*フォント太く*/
192  /* margin: 50px;*/
193  width: 235px;
194  /*ボタンの幅をつくる*/
195  box-shadow: 0px 0px 6px #1B1310;
196  /*ボタンのうっすらとしたかげ*/
197  /*padding: 20px 97px;*/
198  /*なんとなく数値が近いのはわかるけどなぜ20*/
199  padding: 16px 97px;
200}
201
202/*フッター*/
203footer {
204  background-color: #1B1310;
205  /*padding: 29px auto;*/
206  height: 80px;
207  /*フッターの高さをつくる*/
208}
209footer small {
210  color: #FFFFFF;
211  display: block;
212  /*インラインじゃなくてブロック*/
213  text-align: center;
214  /*line-height: 30px;*/
215  /*font-size: 14px;*/
216  padding-top: 30px;
217  /*上に余白を作ることでまんなかになる*/
218}
219
220/**/

試したこと

①
②中央にするためにmarginやblockなどおもいつくことはしてみました。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

模写元

解説記事

解説コード

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

回答1件

ベストアンサー

①については、.content-inner が付いている div が display: flex; になっており、justify-content: space-between; で左右均等配置になっているだけだと思います。
解説コード？を見た限りですと、余白を指定する形では管理していません。

②については、

.form に width を指定して（解説コードだと700px） margin: 0 auto；

h2.contact-title に text-align: center;

各入力項目のdiv（質問者さんはliにしているようですが）に display: flex; と flex-direction: column;

ボタンもdivでくくってtext-align: center;

で大体キレイに成形できるのではないでしょうか。

投稿2021/02/15 08:24

編集2021/02/15 08:56