前提・実現したいこと
ProgateのHTML&CSS中級編の問題で、サイトのwidthの決め方が理解できずに困っています。
top-wrapperとcontainerをdivで作り、cssでwidthを規定したいのですが、
top-wrapperでwidthを決めるのと、containerでwidthを決めるのでは、
サイトのレイアウトが変わってしまい、原因がわかりません。
パターンAでは、top-wrapperタグ内でwidthを規定していて、パターンBでは、containerタグ内でwidthを規定しています。
パターンAでは右側に余白が出てしまうのですが、なぜ違いが生まれるのか原因を知りたいです。
発生している問題・エラーメッセージ
cssで、AパターンとBパターンではレイアウトが異なる理由が分からない。
該当のソースコード
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 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 8 9</head> 10<body> 11 <div class="top-wrapper"> 12 <div class="container"> 13 <h1>LEARN TO CODE.<br> 14 LEARN TO BE CREATIVE.</h1> 15 <p>Progateはオンラインプログラミング学習サービスです。<br> 16 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 17 <div class="btn-wrapper"> 18 <a href="#" class="btn signup">新規登録はこちら</a> 19 <p>or</p> 20 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebook</a> 21 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>twitter</a> 22 </div> 23 </div> 24 </div> 25 26</body> 27</html>
css
1<以下、cssパターンA> 2 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18a { 19 text-decoration: none; 20} 21 22.top-wrapper{ 23 background-image: url(https://prog-8.com/images/html/advanced/top.png); 24 background-size: cover; 25 color: white; 26} 27 28.container{ 29 width: 1170px; 30 padding-top: 180px; 31 padding-bottom: 100px; 32 margin: 0 auto; 33 text-align: center; 34}
css
1<以下、cssパターンB> 2 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18a { 19 text-decoration: none; 20} 21 22.top-wrapper{ 23 background-image: url(https://prog-8.com/images/html/advanced/top.png); 24 background-size: cover; 25 color: white; 26 width: 1170px; 27} 28 29.container{ 30 padding-top: 180px; 31 padding-bottom: 100px; 32 margin: 0 auto; 33 text-align: center; 34}
試したこと
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー