前提・実現したいこと
Progateという学習サイトのHTML&CSSの道場コース初級編という実践問題をやっており、下記画像の仕様書のようにお問い合わせフォームを作成したいのですが、仕様書と高さ?が合わないとエラー(補足欄掲載の画像の赤枠で囲まれている部分)が出るので解消したい。
該当のソースコード
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 <header> 11 <div class="headers"> 12 <div class="header-logo">Progate</div> 13 <div class="header-list"> 14 <ul> 15 <li>プログラミングとは</li> 16 <li>学べるレッスン</li> 17 <li>お問い合わせ</li> 18 </ul> 19 </div> 20 </div> 21 </header> 22 <main> 23 <h1>HELLO WORLD<span class="red">.</span></h1> 24 <h2>プログラミングの世界へようこそ</h2> 25 26 <div class="contents"> 27 <h3>学べるレッスン</h3> 28 <div class="content"> 29 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 30 <P> HTML&CSS </P> 31 </div> 32 <div class="content"> 33 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 34 <p>PHP</p> 35 </div> 36 <div class="content"> 37 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 38 <p>Ruby</p> 39 </div> 40 <div class="content"> 41 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 42 <p>Swift</p> 43 </div> 44 45 </div> 46 </main> 47 <footer> 48 <div class="otoi"> 49 <h3 class="oto-title">お問い合わせ</h3> 50 <p>メールアドレス(必須)</p> 51 <input> 52 <p>お問い合わせ内容(必須)</p> 53 <textarea></textarea> 54 <p>※募集項目は必ずご入力ください</p> 55 <input class="sousin" type="submit" value="送信"> 56 </div> 57 </footer> 58 </body> 59</html>
CSS
1CSS 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 ul li{ 21 float:left; 22 padding: 33px 20px; 23} 24 25.header-logo{ 26 float: left; 27 padding: 20px 40px; 28 font-size: 36px; 29 height: 90px; 30} 31 32.headers{ 33 height: 90px; 34 background-color: #26d0c9; 35 color:#fff; 36 margin-top: 0px; 37 clear:both 38 ; 39 40} 41 42h1{ 43 font-size:140px; 44 margin-top: 100px; 45 margin-right: 80px; 46 margin-left: 80px; 47} 48 49h2{ 50 font-size:60px; 51 margin-right: 80px; 52 margin-left: 80px; 53} 54 55.red{ 56 color: #ff4a4a; 57} 58 59h3{ 60 border-bottom: solid 2px #dee7ec; 61 font-size: 28px; 62 padding-bottom: 15px; 63 margin-top:100px; 64} 65 66.contents{ 67 height: 500px; 68 margin: 100px 80px; 69} 70 71 72.content{ 73 float: left; 74 padding-top: 50px; 75 padding-right: 40px; 76 padding-left: 0px; 77 } 78 79.content p{ 80 margin-top: 30px; 81 font-size: 24px; 82} 83 84.otoi{ 85 margin: 100px 80px; 86} 87 88.oto-title{ 89 font-size: 28px; 90 padding-bottom: 15px; 91 margin-bottom: 50px; 92 border-bottom: 2px solid #dee7ec; 93} 94 95input,textarea{ 96 width: 400px; 97 border: 1px #dee7ec solid; 98 padding: 20px; 99 margin-top: 10px; 100 margin-bottom: 30px; 101 font-size: 18px; 102} 103 104.sousin{ 105 background-color: #889eab; 106} 107 108
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー