前提・実現したいこと
プロゲートのHTML&CSSの道場コースで詰まっております...
お問い合わせ部分のh3の”お問い合わせ”の文字を、メイン部分の”学べるレッスン”と同じく左寄せにしたいです。
どちらにも"section-title"のクラスをつけています。
お問い合わせ部分のみに集中して、
.contactform h3 {text-align: left;}でやってみたのですが、”お問い合わせ”の文字が中央に寄ったままで、改善されませんでした。
発生している問題・エラーメッセージ
HTMLはこちらです↓
</body> </html>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="head-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20 21 <div class="main"> 22 <h1>HELLO WORLD<span>.</span> </h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 <h3 class="section-title">学べるレッスン</h3> 25 <div class="contents"> 26 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 27 <p>HTML&CSS</p> 28 </div> 29 <div class="contents"> 30 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 31 <p>PHP</p> 32 </div> 33 <div class="contents"> 34 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 35 <p>Ruby</p> 36 </div> 37 <div class="contents"> 38 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 39 <p>Swift</p> 40 </div> 41 42 43 <!--お問い合わせ--> 44 <div class="contact-form"> 45 <h3 class="section-title">お問い合わせ</h3> 46 <p class="contact">メールアドレス(必須)</p> 47 <input type="text" class="email"> 48 49 <p class="contact">お問い合わせ内容(必須)</p> 50 <textarea class="contact"></textarea> 51 <!--<input type="textarea" class="contact">--> 52 53 <p class="contact">※必須項目は必ずご入力ください</p> 54 <input type="submit" class="submit"> 55 </div> 56 </div> 57
CSSがこちらです↓
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 10li { 11 list-style: none; 12} 13 14/* ここからCSSを記述してください */ 15body { 16 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 17} 18/*ヘッダー部分*/ 19.header { 20 background-color: #26d0c9; 21 height: 90px; 22 color: #fff; 23} 24.header-logo{ 25 float: left; 26 font-size: 36px; 27 padding: 20px 40px; 28} 29.head-list li { 30 float: left; 31 padding: 33px 20px; 32} 33 34/*メイン部分*/ 35.main { 36 margin: 100px 80px; 37} 38h1 { 39 font-size: 140px; 40} 41h2 { 42 font-size: 60px; 43 padding-bottom: 100px; 44} 45.section-title { 46 border-bottom: 2px solid #dee7ec; 47 font-size: 28px; 48 padding-bottom: 15px; 49} 50span { 51 color: #ff4a4a; 52} 53 54/*レッスン部分*/ 55.contents { 56 float: left; 57 padding-top: 50px; 58 padding-right: 40px; 59 margin-bottom: 100px; 60} 61.contents p{ 62 font-size: 24px; 63 padding-top: 30px; 64} 65/*お問い合わせ*/ 66input { 67 padding: 20px; 68 border: 1px solid #dee7ec; 69 margin-bottom: 30px; 70 margin-top: 10px; 71 width: 400px; 72} 73textarea { 74 padding: 20px; 75 border: 1px solid #dee7ec; 76 margin-bottom: 30px; 77 margin-top: 10px; 78 width: 400px; 79} 80.contact-form h3 { 81 margin-bottom: 50px; 82 text-align: left; 83} 84.submit{ 85 font-size: 18px; 86 color: #889eab; 87 background-color: #dee7ec; 88} 89
試したこと
色々試して見たのですが、根本的な理解が足りないため、どうにもなりません。
どこがどう間違っているか、教えていただけるとありがたいです。
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー