Q&A
前提・実現したいこと
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件
0
ベストアンサー
こんにちは。
①幅を指定するタイミングがなぜ「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
総合スコア36946
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/15 04:48
2020/12/15 07:23
2020/12/15 08:03
2020/12/15 08:08
2020/12/15 08:31 編集
2020/12/15 08:18
2020/12/15 08:28
2020/12/15 08:32
2020/12/15 08:39
2020/12/15 08:45
2020/12/15 08:48
2020/12/15 08:48
2020/12/15 09:05
2020/12/15 23:50