コードは、以下になります。。
<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> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg "> <p>Ruby</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg "> <p>Swift</p> </div> <div class="contactform"> <h3 class="contents-title"> お問い合わせ </h3> <p>メールアドレス(必須)</p> <input> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <p>必須項目は必ずご入力ください</p> <input class="submit-button" type="submit" value="送信"> </div> </div> </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>
html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } li { list-style: none; } /* ここからCSSを記述してください */ body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } .header { background-color: #26d0c9; color: #fff; height: 90px; } .header-logo { float: left; font-size: 36px; padding: 20px 40px; } .header-list { float: left; } .header-list li { float: left; padding: 33px 20px; } .main { padding: 100px 80px; overflow:hidden; } .copy-container h1 { font-size: 140px; } .copy-container h2 { font-size: 60px; } .copy-container span { color: #ff4a4a; } .contents { margin-top: 100px; overflow:hidden; } .section-title { border-bottom: 2px solid #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; } .contact-form { padding-top: 100px; } input, textarea { width: 400px; margin-top: 10px; margin-bottom: 30px; padding: 20px; font-size: 18px; border: 1px solid #dee7ec; } .contact-submit { background-color: #dee7ec; color: #889eab; } .footer { background-color: #2f5167; color: #fff; height: 120px; padding: 40px; } .footer-logo { float: left; font-size: 32px; } .footer-list { float: right; } .footer-list li { padding-bottom: 20px; } .contents-title { border-bottom: 2px solid #dee7ec; font-size: 28px; padding-bottom: 15px; margin-bottom: 50px; }
何が違うのでしょうか?
初めは、「学べるレッスン」と同じ.section-titleで作っていましたが、
「お問い合わせ」だけ、左に寄らないので、.contents-titleとして、cssを別に書いていじってみました。。ができずでした。。
他にも、align="right"など試しましたが、解決できませんでした。。
上記、どこが問題なのか教えていただきたいです????♂️
回答1件
あなたの回答
tips
プレビュー