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

css
1＜変更前＞
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を記述してください */
19header{
20  background-color:#26d0c9;
21  height:90px;
22  color:#fff;
23}
24.header-left{
25  float:left;
26  font-size:36px;
27  padding:20px 40px;
28}
29.header-right li{
30  float:left;
31  padding:33px 20px;
32  font-size:16px;
33}
34.wrapper-title{
35  padding-top:98px;
36  padding-bottom:100px;
37}
38.wrapper-title h1{
39  font-size:140px;
40  padding-left:80px;
41}
42span{
43  color:red;
44}
45.wrapper-title h2{
46  font-size:60px;
47  padding-left:80px;
48}
49.lesson-title{
50  font-size:19px;
51  border-bottom:2px solid #dee7ec;
52  margin:0 80px 1px 80px;
53  padding-bottom:15px;
54}
55.lessons{
56  padding:50px 60px;
57}
58.lesson-card{
59  float:left;
60  padding:0 20px;
61}
62.lesson-card p{
63  font-size:24px;
64  margin-top:30px;
65}
66.clear{
67  clear:both;
68}
69.contact-title{
70  padding:138px 80px 50px;
71}
72.contact-title h2{
73  font-size:28px;
74  border-bottom:2px solid #dee7ec;
75  padding-bottom:15px;
76}
77.contact-form{
78  padding:0 80px 100px 80px;
79}
80.contact-form input,textarea{
81 margin-top:10px;
82 margin-bottom:30px;
83 border:1px solid #dee7ec;
84 font-size:18px;
85}
86input{
87  height:63px;
88  width:400px;
89  padding:0 20px;
90}
91textarea{
92  width:400px;
93  padding:20px;
94}
95.button{
96  background-color:#dee7ec;
97  color:#889eab;
98  font-size:18px;
99}

css
1変更後
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/* ここからCSSを記述してください */
18header{
19  background-color:#26d0c9;
20  height:90px;
21  color:#fff;
22}
23.header-left{
24  float:left;
25  font-size:36px;
26  padding:20px 40px;
27}
28.header-right li{
29  float:left;
30  padding:33px 20px;
31  font-size:16px;
32}
33.wrapper-title{
34  padding-top:98px;
35  padding-bottom:100px;
36}
37.wrapper-title h1{
38  font-size:140px;
39  padding-left:80px;
40}
41span{
42  color:red;
43}
44.wrapper-title h2{
45  font-size:60px;
46  padding-left:80px;
47}
48.lesson-title{
49  font-size:19px;
50  border-bottom:2px solid #dee7ec;
51  margin:0 80px 1px 80px;
52  padding-bottom:15px;
53}
54.lessons{
55  padding:50px 60px;
56}
57.lesson-card{
58  float:left;
59  padding:0 20px;
60}
61.lesson-card p{
62  font-size:24px;
63  margin-top:30px;
64}
65.clear{
66  clear:both;
67}
68.contact-title{
69  padding:138px 80px 50px;
70}
71.contact-title h2{
72  font-size:28px;
73  border-bottom:2px solid #dee7ec;
74  padding-bottom:15px;
75}
76.contact-form{
77  padding:0 80px 100px 80px;
78}
79.contact-form input,textarea{
80 margin-top:10px;
81 margin-bottom:30px;
82 border:1px solid #dee7ec;
83 font-size:18px;
84}
85input{
86  height:63px;
87  width:400px;
88  padding:0 20px;
89}
90textarea{
91  height:85px;
92  width:400px;
93  padding:20px;
94}
95.button{
96  background-color:#dee7ec;
97  color:#889eab;
98  font-size:18px;
99}
100コード

![![イメージ説明](a55a464480d3cacb04ff88c5847d4402.png)]
![イメージ説明](e534421193479f142d8bcb3589a2298d.png)

azuapricot

2019/12/18 04:16

progateでもディベロッパーツールは使えますよね同じように見えても判定画面で変わってしまう＝間違っているということです。 progateはスライドの通りに課題をこなさないと正解にしてくれません。ディベロッパーツールで何が違うのか見てみるといいでしょう。あとコードをスクリーンショットで載せられてもどうしようもありません。

reo_fukkase

2019/12/18 04:20

すみません、説明不足でした、この画像ではコードをお見せしたいわけではなく、右側のプレビューと見本をみてもらいたかったです。右側にあるプレビュー画面と、判定後の（あなたのコード）という画面に写っているものが異なっているのは何故でしょうか？ちなみに、cssチェッカーを行ったところ、問題ありませんでした。

azuapricot

2019/12/18 04:25

なぜでしょうか？と言われても、コードがないのでなんとも言えません。（つまりは質問するときはコードを提示して下さいってことです）画面幅のせいとかじゃないですか？判定画面で、自分のtextareaのheightと答えのtextareaのheightを比較してみましたか？

azuapricot

2019/12/18 04:26

コードもなしに「ここ合ってるはずなんですけど変わっちゃうんですよねー」と言われても「そうですかー」としか言えませんよね。

reo_fukkase

2019/12/18 04:41

今、コードを変更したら次へ進めました。変更前と変更後のコードを追加しました。 textareaのheightを変更しましたが、何故かプレビュー画面ではやはり変化なしでした。しかし、判定はクリアできました。

reo_fukkase

2019/12/18 04:43

他の場所も試しにいじってみましたが、textareaのheightだけがプレビューで反映されず、判定後の画面では反映されているという状態でした。

reo_fukkase

2019/12/18 04:51

質問したかったことは、コードの正誤というより、何故textareaのコードはプレビューには反映されないのに、判定後の画面（一枚目の画像）では反映されているのか？ということです。

reo_fukkase

2019/12/18 04:51

説明不足、コードの貼り付け不足すみません????‍♂️

azuapricot

2019/12/18 04:55

HTMLのコードがない以上憶測でしかありませんけど、プレビュー画面の高さが原因とかじゃないですか？

reo_fukkase

2019/12/18 04:56

申し訳ありません、htmlのコードも貼りますね。

azuapricot

2019/12/18 05:00

（Progateのバグかもしれないしあんまり拘らずに先に進んだ方が良いような気もしますけどね）

reo_fukkase

2019/12/18 05:03

そうですね、ありがとうございました????‍♂️

azuapricot

2019/12/18 05:05

Progateはあくまで基本を学ぶところなので、基本が理解できて使えるようになったらあとは回答移してごり押しで次に進むのもありかなとは思ってます

reo_fukkase

2019/12/18 05:06

アドバイスありがとうございます！

退会済みユーザー

2019/12/18 12:01

自身のコードと回答を比較する機能がprogateにはあるので、使用してみては？

reo_fukkase

2019/12/18 12:09

最終的にはそのようにして進みました。誤った数値を入れてた時は、プレビューではその誤った数値は反映されず、正しい見た目になっていました。ですが、実際には判定後の見た目では誤った数値が反映されてたので、プレビューに正しく反映されないProgateのバグなのかなと思い、仕組みは理解しているのであまり気にせずに進みました。その後もそのようなことがありましたが、気にせず進みました。解答ありがとうございました????‍♂️

退会済みユーザー

2019/12/18 12:11

気にせず進みました。 >問題解決という事でしょうか？問題が解決したのでしたら、解決済みにしてください。私もそうですが、解決していないと思いリファタグも行なってしまいました。

reo_fukkase

2019/12/18 12:13

すみません、解決済みのボタンを探していました！ご指摘ありがとうございます

reo_fukkase

2019/12/18 12:17

回答欄に誰もいなくて質問が解決済みにできないので、自己解決をしようと思います。ありがとうございました。

退会済みユーザー

2019/12/18 12:18

なるほど、そうだったんですね！ html cssを学ぶのでしたら、ドットインストールがおすすめですよ。 progateとは違って、動画配信形式で自身で作成して行う事ができます。質問者さんの学習スタイルによって異なりますが、個人的におすすめですし、私自身もそれで学習しています。登録するだけで、無料で初歩的な事動画は見る事ができるので、ぜひ一度試されてみてはいかがでしょうか？ https://dotinstall.com/

退会済みユーザー

2019/12/18 12:20

回答欄に誰もいなくて質問が解決済みにできないので、自己解決をしようと思います。ありがとうございました。 >了解です

reo_fukkase

2019/12/18 12:21

アドバイスありがとうございます！ドットインストールも試してみようと思います