Q&A
崩れたほうのレイアウトの画面キャプチャもご提示ください
今Progateの道場編をやっています。
ただ今ちょっと謎があったので分かるかたいたら教えて頂きたいと思いました。
HTMLで道場編をやっているのですが、ここで一つ疑問があります。
上記のようなものを作成中なのですが、
.containerのpaddingを外すと、下のようにレイアウトが崩れてしまいます。
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 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <div class="header"> 11 <div class=" header-logo">Progate</div> 12 <div class="header-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20 21 <div class="container"> 22 <h1>HELLO WORLD<span>.</span></h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 </div> 25 </body> 26</html>
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 font-size:36px; 27 padding:20px 40px; 28 float:left; 29} 30 31.header-list li{ 32 float:left; 33 padding:33px 0 33px 20px; 34} 35 36.container{ 37 padding:100px 80px; 38} 39 40h1{ 41 font-size:140px; 42 43} 44 45span{ 46 color:#ff4a4a; 47} 48 49h2{ 50 font-size:60px; 51}
コードは上記の通りです。
ディベロッパーツールで確認しても不要なmarginなどはありませんでした。
原因が分かるかたいましたら、ご教授いただけると幸いです。
よろしくお願いします。
回答1件
0
ベストアンサー
floatしている.header-logo が .header からはみ出ているのでそこに引っかかっています。
例えば下記のようにするとか、
CSS
1.header { 2 background-color: #26d0c9; 3 color: #fff; 4 height: 90px; 5 overflow: hidden; /* ADD */ 6}
下記のようにfloatを処理すればよいです。
CSS
1.container { 2 clear: both; 3}
というかflexやGridを使いましょう。（そういう教材を探しましょう）
投稿2019/08/27 13:30
総合スコア69398
あなたの回答
tips
プレビュー
