Progate HTML & CSS 道場コース初級編 「コンテンツ部分を作ろう」の箇所でエラーが表示されます。
どうしてもクリアしたので宜しくお願いいたします。
自身のHTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> <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-form"></div> </div> </body> </html>
正解HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> <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-form"></div> </div> </body> </html>
自身のCSS
/* ここからCSSを記述してください */ .header { background-color: #26d0c9; color: #fff; height: 90px; } .header-logo { float: left; font-size: 36px; padding: 20px 40px; } .header-list li { float: left; padding: 33px 20px; } .main { padding: 100px 80px; } .copy-container h1 { font-size: 140px; } .copy-container h2 { font-size: 60px; } .copy-container span { color: #ff4a4a; } .contents { height: 500px; margin-top: 100px; } .section-title { border-bottom: solid 2px #dee7ec; font-size: 28px; padding-bottom: 15px; margin-bottom: 50px; } .contents-item { float: left; margin-right: 40px; } .contents-item p { font-size: 24px; margin-top: 30px; }
正解CSS
/* ここからCSSを記述してください */ .header { background-color: #26d0c9; color: #fff; height: 90px; } .header-logo { float: left; font-size: 36px; padding: 20px 40px; } .header-list li { float: left; padding: 33px 20px; } .main { padding: 100px 80px; } .copy-container h1 { font-size: 140px; } .copy-container h2 { font-size: 60px; } .copy-container span { color: #ff4a4a; } .contents { height: 500px; margin-top: 100px; } .section-title { border-bottom: solid 2px #dee7ec; font-size: 28px; padding-bottom: 15px; margin-bottom: 50px; } .contents-item { float: left; margin-right: 40px; } .contents-item p { font-size: 24px; margin-top: 30px; }
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
何度もコードを見直し、高さを指定のものに変更したり、レイアウトについて検索しましたが、どうしても正解となるレイアウトに修正することができません。
補足情報(FW/ツールのバージョンなど)
Windows 10、ブラウザはChrome。
前提・実現したいこと
正解のレイアウトに修正し、初級編をクリアしたです。
発生している問題・エラーメッセージ
残念...全体の高さが2109pxになっています。答え(1171px)と比較してみてください。
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー