読者です 読者をやめる 読者になる 読者になる

ProgateのHTML/CSSの道場編で判定OKが出ないときの対処法!

残念...

赤く囲まれた部分を見直してみましょう!

 

なんて言われてしまいました...。でも、プレビューでは確実に合ってるんです!!!

 

 

ProgateのHTML/CSSの道場編では、仕様書にのっとって自分でコードを叩いていって、

「見た目だけで」合格かどうかを判定する

という内容になってます。

 

でも、

プレビューで合ってるのに、判定確認ボタンをクリックすると

判定で「残念......赤い囲まれた部分を見直してみましょう!」

と可愛い忍者わんこに言われてしまうときがあります。ぼくは先程こうなってしまい、パニクリました。

 

よく見てみると、ある異変に気が付きました。

コードを叩いてるときのプレビュー画面と、

判定結果のプレビュー画面が全く違うんですもん(笑)

まるで、学校で提出したテスト用紙が、途中で入れ替えられたかのように。。。

「こんなの俺のじゃないよ!!!」

 

と、なってしまいました(笑)。

 

そしてそこから5分ほどもがいた結果、解決しましたので、

これは僕のほんの1事例ですが、解決策をシェアしておきます。

 

プレビューで合ってるのに、なんでダメなの!?

僕がダメだった原因はpxを書くのを忘れたいた事。これでした。

サイズ指定のときに、ちゃんと、pxを書いてますか?

px指定をしてなくても、数字だけ入れればちゃんとプレビューには表示されます。(←もしかしたらChromeだけなのかも)

しかし、判定結果の画面には、そのサイズは完全に無視されてしまいます。

 

つまり、解決策としては、

pxを書いていないところに、指定すれば、ちゃんと判定してくれます。

 

【追記】他にも原因があるかも・・・

さきほど、またプレビュー画面と判定結果画面での自分のデザインが異なる

という事態が発生しました。

んーここまでくると不信感が出て来るかも・・・。まだ解決策でていません。

※どうしても解決しない場合は、完成品のHTMLとCSSをコピペすると解決します。レッスンの趣旨である「見た目だけで判定」は、言葉だけのようです。そうは言っても、結局はProgate側のコードが正解なわけですから。。。