Progateにてプレビューと判定画面が異なる

Progate初級編道場コースにて　プレビューと見本はほぼ合致していると思うのですが、判定画面になると
違いが出てしまいます　何がおかしいのかわかりません

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="header-logo">Progate</div>
12     <div class="header-list">
13      <li>プログラミングとは</li>
14      <li>学べるレッスン</li>
15      <li>お問い合わせ</li>
16     </div>
17    </header>
18    <div class="main">
19     <h1>HELLO  WORLD<span>.</span></h1>
20     <h2>プログラミングの世界へようこそ</h2>
21    </div>
22    <div class="lessons">
23     <h3>学べるレッスン</h3>
24    <div class="lesson-wrapper">
25     <div class="lesson">
26      <div class="icon">
27       <img src=https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg >  
28      </div>
29      <p>HTML & CSS</p>
30     </div>
31     <div class="lesson">
32      <div class="icon">
33       <img src=https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg >  
34      </div>
35      <p>PHP</p>
36     </div>
37     <div class="lesson">
38      <div class="icon">
39       <img src=https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg >  
40      </div>
41      <p>Ruby</p>
42     </div>
43     <div class="lesson">
44      <div class="icon">
45       <img src=https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg >  
46      </div>
47      <p>Swift</p>
48     </div>
49    </div>
50    </div>
51    <div class="contact-form">
52     <h3>お問い合わせ</h3> 
53     <p>メールアドレス（必須）</p>
54     <input>
55     <p>お問い合わせ内容（必須）</p>
56     <textarea ></textarea>
57     <p>※必須項目は必ずご入力ください</p>
58     <input type="submit" class="submit">
59    </div>
60    <footer>
61     <div class="footer-logo">
62      Progate  
63     </div>
64     <ul class="footer-li">
65      <li>会社概要</li>
66      <li>採用</li>
67      <li>お問い合わせ</li>
68     </ul>
69    </footer>
70    
71
72  </body>
73</html>

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
10body {
11  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
12}
13
14li {
15  list-style: none;
16}
17
18/* ここからCSSを記述してください */
19.header-logo{font-size:36px; color:#fff; padding:20px 40px;} header{display:flex; height:90px; background-color:#26d0c9;}
20.header-list {display:flex; color:#fff; } .header-list li{padding:33px 20px;}
21
22.main{padding:100px 80px;} .main h1{font-size:140px;} .main h2{font-size:60px;} .main span{color:#ff4a4a;}
23
24.lessons{height:500px; padding-right:80px; padding-left:80px; margin-bottom:100px;} 
25.lessons h3{font-size:28px; border-bottom:2px solid #dee7ec; padding-bottom:15px; margin-bottom:50px;}
26.lesson-wrapper{display:flex;} .lesson img{margin-right:40px; margin-bottom:30px;}
27.lesson p{font-size:24px;}
28
29.contact-form{padding-right:80px; padding-left:80px; margin-bottom:100px;}
30.contact-form h3{font-size:28px; border-bottom:2px solid #dee7ec; padding-bottom:15px; margin-bottom:50px;}
31input{width:400px; padding:20px; margin-top:10px; margin-bottom:30px; border:1px solid #dee7ec;} 
32textarea{width:400px; padding:20px; margin-top:10px; margin-bottom:30px; border:1px solid #dee7ec;}
33.submit{background-color:#dee7ec; font-size:18px; color:#889eab;}
34
35.footer-logo{font-size:32px; float:left; color:#fff;} .footer-li{float:right;} .footer-li li{padding-bottom:20px; color:#fff;}
36footer{padding:40px; height:120px; background-color:#2f5167;}
37
38

m.ts10806

2020/09/16 08:37

「ほぼ」は100%ではないので、当然かと思います。

syo--

2020/09/17 03:30

確かにそうですね　失礼いたしました

行動規範の内容に同意します

回答2件

ベストアンサー

このあたりが影響しているのではないかと。

<input type="submit">

value を指定しなかった場合、**ボタンにはユーザーエージェントによって選ばれた既定のラベルが表示されます。**このラベルは「送信」または「クエリを送信」などのものです。次のものはこのブラウザーにおける送信ボタンの既定のラベルです。

つまり、確実に思ったラベルにするためにはvalue属性の属性値を指定するしかありません。

Progateやったことないですが、Progate内部の仕組みで何かしら既定値があるのかもしれませんね。
その既定値にブレがあって今回の現象になっていると考えられなくもないですが、あくまで推測に過ぎないので、気になるのでしたらProgateの運営に問い合わせてみると良いかもしれません。

投稿2020/09/16 09:56

m.ts10806

総合スコア80875

syo--

2020/09/17 03:34

ありがとうございます！無事クリアできました！　 valueを指定しないとそんなことになるんですね

m.ts10806

2020/09/17 04:08 編集

「書いてないことはブラウザが勝手に解釈する」と覚えておいても良いかもしれません。目的が指示レイアウト通りにすることなのであれば尚更デフォルト値を無視してはいけません。これに限らずよくあることです。

行動規範の内容に同意します

ボタンが"submit"になっているせいかと思います。

value属性に"送信"を指定すれば問題ないはずです。

HTML
1<input type="submit" class="submit" value="送信">

投稿2020/09/16 08:09

ELBE

総合スコア305

syo--

2020/09/17 03:35

ありがとうございます！進めました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Progateにてプレビューと判定画面が異なる

関連した質問