Q&A
前提・実現したいこと
現在、ProgateのHTML&CSSの道場コース 初級編を勉強しているのですが
５番目の「フッター部分を作ろう」の所で、フッター右側の「会社概要…」の所の上に空白ができてしまいます。
Progateの見本は空白は無く、左側にある「Progate」と同じ高さにあります。
コードを見直しても、原因がわかりませんでした。
どなたか教えていただけないでしょうか？
よろしくお願いいたします。
発生している問題・エラーメッセージ
<html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <header> <div class="pro"> Progate </div> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </header> <div class="body"> <h1>HELLO WORLD<span style="color:#ff4a4a">.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="content"> <h3>学べるレッスン</h3> <div class="contentsitem"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"/> <p>HTML& CSS</p> </div> <div class="contentsitem"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"/> <p>PHP</p> </div> <div class="contentsitem"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"/> <p>Ruby</p> </div> <div class="contentsitem"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"/> <p>Swift</p> </div> </div> <div class="contact"> <h3 class="topc">お問い合わせ</h3> <p>メールアドレス（必須）</p><input> <p>お問い合わせないよう（必須）</p> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <input class="submit" type="submit" value="送信" /> </div> <div class="footer"> <div class="footer-logo">Progate</div> <div class="footer-list"> <ul> <li>会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div> </div> </body> </html> エラーメッセージ
該当のソースコード
ソースコード/* CSSのリセット（消さないでください） */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } li { list-style: none; } /* ここからCSSを記述してください */ header{ background-color: #26d0c9; color: #fff; height: 90px; } .pro{ font-size: 36px; padding: 20px 40px; float: left; } li{ padding: 33px 22px; float: left; } .body{ padding: 100px 80px; } h1{ font-size: 140px; } h2{ font-size: 60px; } .content{ height: 500px; padding: 0 80px 0 80px; } h3{ border-bottom: solid 2px #dee7ec; margin-bottom: 50px; font-size: 28px; padding-bottom: 15px; } .contentsitem{ font-size: 24px; float: left; margin-right: 40px; } .contentsitem p{ margin-top: 30px; } .contact{ padding: 100px 80px; } .contact p{ } input, textarea{ margin-top: 10px; margin-bottom: 30px; padding: 20px; border: 1px solid #dee7ec; font-size: 18px; width: 400px; } .submit{ background-color: #dee7ec; color: #889eab; } .footer{ height: 120px; background-color: #2f5167; color: #fff; padding: 40px; } .footer-logo{ font-size: 32px; float: left; } .footer-list li{ padding-bottom: 20px; } .footer-list{ float: right; }
試したこと
progateの答えをみましたがわかりませんでした
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
動作確認しました。ここが間違ってます。
css
1//28行目 2li{ 3 padding: 33px 22px; 4 float: left; 5}
ここでfloat: left;に指定しちゃっているので、さいごのここ
css
1.footer-list li{ 2 padding-bottom: 20px; 3}
と重なってます。
投稿2020/01/04 08:24
総合スコア427
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/04 12:37
2020/01/04 22:39