前提・実現したいこと

Progate 中級　道場のトップ部分を作ろうに関する質問です。
①幅を指定するタイミングがなぜ「container」なのか？（中央寄せに関しても）
→幅は全体的なものだと思うので、一番大きく包括している「top-wrapper」なのでは？と感じました。
②「signup」のmargin指定について、複数ある場合はまとめると思うのですが、「margin: 15px 0 15px 0;」ではダメなのか、何故ダメなのかと感じました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <!--ここからtop-->
13  <div class="top-wrapper">
14    <div class="container">
15      <h1>LEAN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
16      <p>Progateはオンラインプログラミング学習サービスです。<br>
17初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
18      <a href="#" class="btn signup">新規登録はこちら</a>
19      <p>or</p>
20      <a href="#" class="btn facebook"><span class="fa fa-facebook">Facebookで登録</span></a>
21      <a href="#" class="btn twitter"><span class="fa fa-twitter">Twitterで登録</span></a>
22    </div>
23  </div>
24  <!--ここまでtop-->
25  
26</body>
27</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22/*ここからtop-wrapper*/
23.top-wrapper {
24  background-image:url(https://prog-8.com/images/html/advanced/top.png);
25  background-size:cover;
26  color:white;
27  text-align:center;
28  padding: 180px 0 100px;
29  
30}
31
32.container {
33  width:1170px;
34 margin: 0 auto;
35 
36}
37
38
39.top-wrapper h1 {
40  font-size:45px;
41  letter-spacing:5px;
42  opacity:0.7;
43}
44
45.top-wrapper p {
46  opacity:0.7;
47  margin-bottom: 15px;
48}
49
50.btn {
51  color:white;
52  opacity:0.8;
53  padding:8px 24px;
54  display:inline-block;
55  opacity:0.8;
56  border-radius: 4px;
57}
58
59.signup {
60  background-color: #239b76;
61  margin:15px 0 15px　0;
62  
63}
64
65.facebook {
66  background-color:#3b5998;
67  margin-right:10px;
68}
69
70.twitter {
71  background-color: #55acee;
72}
73
74.btn:hover {
75  opacity:1;
76}
77
78.fa {
79  margin-right: 5px;
80}

試したこと

何度もリセットしてやり直したり、ノートに構成をかいて頭を整理したり、答えを見ながらどこができていない、あるいは納得いかないのかを書きだしました。

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

Windows

添付写真

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

回答1件

ベストアンサー

こんにちは。

①幅を指定するタイミングがなぜ「container」なのか？

→幅は全体的なものだと思うので、一番大きく包括している「top-wrapper」なのでは？と感じました。

やってみればわかると思うのですが……
それとも、やってみても違いがわかりませんでしたか？

②「signup」のmargin指定について、複数ある場合はまとめると思うのですが、「margin: 15px 0 15px 0;」ではダメなのか、何故ダメなのかと感じました。

やってみればわかると思うのですが……
それとも、やってみても違いがわかりませんでしたか？

値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。

margin - CSS: カスケーディングスタイルシート | MDN

③画像を全体の背景としたいが、どうしても全体的に表示されない

background-size:coverとしているからです。

cover

画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、**空き領域が残らないように上下または左右のどちらかを切り取ります**。

background-size - CSS: カスケーディングスタイルシート | MDN

__④「font-awasemo」で取り入れたマークとその後の文字間について、上手く反映されません。 __

Font Awesome のフォントは、::before疑似要素に表示されています。ですので、親要素にマージンをつけるのではなくて、疑似要素にマージンをつけてみてください。

コメントを受けて追記

①「top-wrapper」でやると、横に余白ができ上手くいかないことはわかりました。深く考えず、それだとできないから、でいいのでしょうか？

上手くいかない原因を知りたい、という質問だったのですね。理解しました。

まず前提ですが、CSSにおけるボックスモデルをご参照ください。
CSS 基本ボックスモデル入門 - CSS: カスケーディングスタイルシート | MDN

この内の「コンテンツ領域」に背景が描画されることを、理解してください。

そしてつぎに、このコンテンツ領域の幅はwidthで設定されることを理解してください。

width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域の幅を設定します。

width - CSS: カスケーディングスタイルシート | MDN

最後に、widthプロパティの初期値（何も指定しない場合の値）はautoであること、width: autoはブロックレイアウトの通常フローではwidth: 100%と同じであることを理解してください。

つまり、.top-wrapperにwidth: 1140pxを指定するということは、背景のサイズが100%から1140pxに縮む、ということです。

②わずかに動きがあり差があることはわかるのですが、書き換えながらだとどこが変化しているのかなかなかわからず……

繰り返しになりますが、こういうことです。

値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。

margin - CSS: カスケーディングスタイルシート | MDN

ですので、順番を変えると、表示も変わります。

コメントを受けて再追記

正答の方では「margin-top:15px; margin-bottom:15px;」と分けて記述されていることに対し、「margin:15px 0 15px 0;」ではダメなのか

まず、ご提示のコードですが、全角スペースが混じっているのが原因だと思います。

css
1.signup {
2  background-color: #239b76;
3  margin:15px 0 15px　0;
4/*                  ^ここが全角スペース */
5}

また、その打ち間違いを別にしても、両者には違いがあります。
マージンについて書かれているルールが他に存在しないのであれば、その両者に違いはありません。
ですが、以下のような場合は上書きされます。

css
1.btn {
2  margin-left: auto;
3}
4
5.signup {
6  margin:15px 0 15px 0; /* margin-left: 0 */
7  
8/*
9  margin-top:15px;
10  margin-bottom:15px;
11  ^この場合は、margin-left: auto が残る。
12*/
13}

投稿2020/12/15 04:26

編集2020/12/15 08:41

Lhankor_Mhy

総合スコア36089

mitrasi

2020/12/15 04:48

ご回答ありがとうございます。 ①「top-wrapper」でやると、横に余白ができ上手くいかないことはわかりました。深く考えず、それだとできないから、でいいのでしょうか？ ②わずかに動きがあり差があることはわかるのですが、書き換えながらだとどこが変化しているのかなかなかわからず……初歩的なことで、申し訳ありません???? ③なぜか書き漏らしていた「padding:180px 0 100px 0」を入れたらうまく反映されました。　ご教授ありがとうございます。 ④無事解決いたしました。ご教授ありがとうございます。

Lhankor_Mhy

2020/12/15 07:23

追記しました。

mitrasi

2020/12/15 08:03

追記、解説ありがとうございます！ ①順を追った丁寧な説明でものすごくわかりやすかったです。とてもすっきりしました！ありがとうございます！ ②すみません…説明のしようがないってレベルのお話かもしれませんが、まだどこかもやもやします???? marginの指定の仕方が、2つの値なら上下、左右、4つの値なら上記のような、といった順によってどこに適用されるのか、それが変化することなどは理解しております。ただ、4つそそれぞれが違う値がなくても、特に指定しないところは0を指定して、指定したいところの値を埋めてまとめるやり方を見かけたことがあり、それでやってきたので、同様に不要なところは0で埋めて一行でまとめることはできないのかなと思った次第です。説明力不足で申し訳ありません。お忙しいことと存じますが、何卒よろしくお願い致します。

Lhankor_Mhy

2020/12/15 08:08

すみません、問題の理解に齟齬があるかもしれません。ご提示のコードに、 .signup { background-color: #239b76; margin:15px 0 0 15px; } とあり、『「margin: 15px 0 15px 0;」ではダメなのか』とあったので、 margin:15px 0 0 15px; margin: 15px 0 15px 0; この順序の違いについてのご質問だと理解していたのですが、いかがですか？

mitrasi

2020/12/15 08:31 編集

紛らわしいことして大変申し訳ございません???? こちらが提示したコードの書き間違いです。すぐに訂正させて頂きます。質問内容としては、正答の方では「margin-top:15px; margin-bottom:15px;」と分けて記述されていることに対し、「margin:15px 0 15px 0;」ではダメなのか、とお聞きしたかったのです。

mitrasi

2020/12/15 08:18

訂正いたしました！こちらのミスにより、お手数おかけして申し訳ございませんでした。

Lhankor_Mhy

2020/12/15 08:28

なるほど、理解しました。（150pxと15pxが混在しているのは、間違いですよね？）

mitrasi

2020/12/15 08:32

はい、謝罪した側から重ね重ねすみません…????訂正いたしました

Lhankor_Mhy

2020/12/15 08:39

追記しました。

mitrasi

2020/12/15 08:45

全角スペースのミスの件、ご指摘ありがとうございます！それを覗いても両者に違いがあることは初めて知りました。ありがとうございます！特に指定がなくて、指定がない値は「0」と指定するのと違って、topとbottom以外は特に指定していない場合は「0」ではなくあくまで初期値の「auto」である状態なのですね。ちなみにですが、leftが初期値のままであれば同様に「0」指定していないrightも初期値のままである、という把握でよろしいでしょうか？

Lhankor_Mhy

2020/12/15 08:48

margin の初期値は auto ではなくて 0 ですが、それ以外の内容についてはご理解の通りだと思います。

mitrasi

2020/12/15 08:48

それとも、margin-rightに関してはその後で >.facebook { background-color:#3b5998; margin-right:10px; という指定がなされるために、「auto」ではなくなり、今のご説明では省かれていたのでしょうか？

Lhankor_Mhy

2020/12/15 09:05

そういう意図ではありませんでした。初期値が 0 ですから、指定のない margin-right は margin:15px 0 15px 0 で上書きしても同じ値であるため、説明を省いていました。

mitrasi

2020/12/15 23:50

おはようございます。なるほど、「margin-right」は初期値のが残り、「margin-left」のautoは初期値ではなく、btnで指定したときのものが残っているということですね。とても長々と質問させていただき、大変恐縮ではございましたが、おかげさまでとてもすっきり致しました！改めて、深く感謝申し上げます。

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