前提・実現したいこと
ProgateのHTML初級編で早速躓いてしまいました。以下のようなエラーが出ます。
お問い合わせフォームの送信ボタンに関するエラーだと思うのですが、
何回か試すと、まったく同じ文字列を入力しているにも関わらず、異なるエラーメッセージが出ます。
プロパティの値とは”background-color”や”color”に該当する部分のことですよね?そうだとすればその点は間違いがないので、ほかの部分にエラーがあると考えたのですが、見当たりません……。
どこがおかしいのでしょうか?
発生している問題・エラーメッセージ
「contact-submitのcolorプロパティの値が間違っています」 「contact-submitのbackgroundプロパティの値が間違っています」
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <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> <div class="contact-form"> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス(必須)</p> <!-- <input>要素を追加してください --> <input> <p>お問い合わせ内容(必須)</p> <!-- <textarea>要素を追加してください --> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <!-- <input>要素を追加してください --> <input class="contact-submit" type="submit" value="送信" /> </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>
body { font-family: "Avenir Next"; } li { list-style: none; } .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: 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のCSSを指定してください */ input,textarea{ width:400px; margin-top:10px; margin-bottom:30px; padding:20px; font-size:18px; border:1px solid #dee7ec; } /* contact-submitのCSSを指定してください */ .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; }
試したこと
指定された色に間違いはなく、スライド等を確認しましたが、どこが間違っているのかわかりませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー