ウェブサイトの真ん中部分 index.html の <div class="contents">
<h3 class="section-title">学べるレッスン</h3>以下、仕様書の『学べるレッスン』以下(『お問い合わせ』より上)の箇所についての質問です。 ![イメージ説明](e0b3fdc680cce664c3f97474a989208b.png)答えの方のCSS の .contens には、margin-top:100px の記述があります。
それを自分でCSSに書くと、配置バランスが大きく下がります。
100px分下がるようです。
同じく、答えの方のCSSの.contensには、margin-left:80; がなくても、左から 80px分あきます。
答えの方の CSS .cotents には、margin-bottom:100 を記述しなくても、
<p>HTML&CSS等の4つのp要素の下のスペース(margin)が詰まりません。 自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。 なぜでしょうか?該当のソースコード
HTML
1 <div class="main"> 2 <div class="copy-container"> 3 <h1>HELLO WORLD<span>.</span></h1> 4 <h2>プログラミングの世界へようこそ</h2> 5 </div> 6 7 <div class="contents"> 8 <h3 class="section-title">学べるレッスン</h3> 9 <div class="contents-item"> 10 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 11 <p>HTML & CSS</p> 12 </div> 13 <div class="contents-item"> 14 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 15 <p>PHP</p> 16 </div> 17 <div class="contents-item"> 18 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 19 <p>Ruby</p> 20 </div> 21 <div class="contents-item"> 22 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 23 <p>Swift</p> 24 </div> 25 </div> 26 </div> 27 </body> 28</html> 29
CSS
1 2/* CSSのリセット(消さないでください) */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, 6form, input, div { 7 margin: 0; 8 padding: 0; 9} 10 11body { 12 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 13} 14 15li { 16 list-style: none; 17} 18 19/* ここからCSSを記述してください */ 20.header { 21 background-color: #26d0c9; 22 color: #fff; 23 height: 90px; 24} 25 26.header-logo { 27 float: left; 28 font-size: 36px; 29 padding: 20px 40px; 30} 31 32.header-list { 33 float: left; 34} 35 36.header-list li { 37 float: left; 38 padding: 33px 20px; 39} 40 41.main { 42 padding: 100px 80px; 43} 44 45.copy-container h1 { 46 font-size: 140px; 47} 48 49.copy-container h2 { 50 font-size: 60px; 51} 52 53.copy-container span { 54 color: #ff4a4a; 55} 56 57.contents { 58 height: 500px; 59 margin-top: 100px; 60} 61 62.section-title { 63 border-bottom: 2px solid #dee7ec; 64 font-size: 28px; 65 padding-bottom: 15px; 66 margin-bottom: 50px; 67} 68 69.contents-item { 70 float: left; 71 margin-right: 40px; 72} 73 74.contents-item p { 75 font-size: 24px; 76 margin-top: 30px; 77}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
ウェブサイトの真ん中部分 html の <div class="contents">以下、学べるレッスン以下の箇所の質問です。
1.
答えの方のCSS の contens には、margin-top:100px がありますが、
それを自分でCSSに書くと、配置バランスが大きく下がります。
100px分下がるようです。
同じく、答えの方のCSSの.contensには、margin-left:80; がなくても、左から 80px分あきます。
答えの方の cotents には、margin-bottom:100 を記述しなくても、
<p>HTML&CSS等の4つのp要素の下のスペース(margin)が詰まりません。 ![イメージ説明](e5013b3e8dd3ef89f47d2b2b0e8b1407.png)自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。
なぜでしょうか?
エラーメッセージ
該当のソースコード
HTML
1 <div class="main"> 2 <div class="copy-container"> 3 <h1>HELLO WORLD<span>.</span></h1> 4 <h2>プログラミングの世界へようこそ</h2> 5 </div> 6 7 <div class="contents"> 8 <h3 class="section-title">学べるレッスン</h3> 9 <div class="contents-item"> 10 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 11 <p>HTML & CSS</p> 12 </div> 13 <div class="contents-item"> 14 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 15 <p>PHP</p> 16 </div> 17 <div class="contents-item"> 18 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 19 <p>Ruby</p> 20 </div> 21 <div class="contents-item"> 22 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 23 <p>Swift</p> 24 </div> 25 </div> 26 </div> 27 </body> 28</html> 29
CSS
1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18/* ここからCSSを記述してください */ 19.header { 20 background-color: #26d0c9; 21 color: #fff; 22 height: 90px; 23} 24 25.header-logo { 26 float: left; 27 font-size: 36px; 28 padding: 20px 40px; 29} 30 31.header-list { 32 float: left; 33} 34 35.header-list li { 36 float: left; 37 padding: 33px 20px; 38} 39 40.main { 41 padding: 100px 80px; 42} 43 44.copy-container h1 { 45 font-size: 140px; 46} 47 48.copy-container h2 { 49 font-size: 60px; 50} 51 52.copy-container span { 53 color: #ff4a4a; 54} 55 56.contents { 57 height: 500px; 58 margin-top: 100px; 59} 60 61.section-title { 62 border-bottom: 2px solid #dee7ec; 63 font-size: 28px; 64 padding-bottom: 15px; 65 margin-bottom: 50px; 66} 67 68.contents-item { 69 float: left; 70 margin-right: 40px; 71} 72 73.contents-item p { 74 font-size: 24px; 75 margin-top: 30px; 76}
試したこと
.contents {}内に、margin-top:100; margin-left: 80; を書いたり消したりした。
.contens-item{}内に、margin-bottom:100; を書いたり消したりした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
ウェブサイトの真ん中部分 html の <div class="contents">以下、学べるレッスン以下の箇所の質問です。
1.
答えの方のCSS の contens には、margin-top:100px がありますが、
それを自分でCSSに書くと、配置バランスが大きく下がります。
100px分下がるようです。
同じく、答えの方のCSSの.contensには、margin-left:80; がなくても、左から 80px分あきます。
答えの方の cotents には、margin-bottom:100 を記述しなくても、
<p>HTML&CSS等の4つのp要素の下のスペース(margin)が詰まりません。 ![イメージ説明](e5013b3e8dd3ef89f47d2b2b0e8b1407.png)自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。
なぜでしょうか?
エラーメッセージ
該当のソースコード
HTML
1 <div class="main"> 2 <div class="copy-container"> 3 <h1>HELLO WORLD<span>.</span></h1> 4 <h2>プログラミングの世界へようこそ</h2> 5 </div> 6 7 <div class="contents"> 8 <h3 class="section-title">学べるレッスン</h3> 9 <div class="contents-item"> 10 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 11 <p>HTML & CSS</p> 12 </div> 13 <div class="contents-item"> 14 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 15 <p>PHP</p> 16 </div> 17 <div class="contents-item"> 18 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 19 <p>Ruby</p> 20 </div> 21 <div class="contents-item"> 22 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 23 <p>Swift</p> 24 </div> 25 </div> 26 </div> 27 </body> 28</html> 29
CSS
1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18/* ここからCSSを記述してください */ 19.header { 20 background-color: #26d0c9; 21 color: #fff; 22 height: 90px; 23} 24 25.header-logo { 26 float: left; 27 font-size: 36px; 28 padding: 20px 40px; 29} 30 31.header-list { 32 float: left; 33} 34 35.header-list li { 36 float: left; 37 padding: 33px 20px; 38} 39 40.main { 41 padding: 100px 80px; 42} 43 44.copy-container h1 { 45 font-size: 140px; 46} 47 48.copy-container h2 { 49 font-size: 60px; 50} 51 52.copy-container span { 53 color: #ff4a4a; 54} 55 56.contents { 57 height: 500px; 58 margin-top: 100px; 59} 60 61.section-title { 62 border-bottom: 2px solid #dee7ec; 63 font-size: 28px; 64 padding-bottom: 15px; 65 margin-bottom: 50px; 66} 67 68.contents-item { 69 float: left; 70 margin-right: 40px; 71} 72 73.contents-item p { 74 font-size: 24px; 75 margin-top: 30px; 76}
試したこと
CSSの→
.contents {}内に、margin-top:100; margin-left: 80; を書いたり消したりした。
.contens-item{}内に、margin-bottom:100; を書いたり消したりした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。