Progate メインのレイアウト

質問

下記動画URLを参照してください。
https://streamable.com/upsi1t

エラーとして終了タグがないと銘記されていますが、どこを訂正すればよいでしょうか

回答No.3

celtis · ベストアンサー

>Progateには間違って入力した行に赤のマークなどがつく機能はないでしょうか。
タグを書き始めたりすると、状況によって英文のエラーメッセージが表示されるようです。
閉じタグが無い場合は親子関係が崩れるので、親要素の方にエラーが表示されたりしますね。

HTMLやCSSのエラーチェックは、オンラインで利用できるサービスがあります。
https://style.potepan.com/articles/21554.html

>また、EditorとしてCodePenを使っているのですか、入力ミスの箇所を警告してくれる機能はないのでしょうか
それぞれのエディターに分析(Analyze)機能がありました。

お礼

いつもありがとうございます。

補足

回答ありがとうございます。
CodePenにそういう機能があったのですね。気が付きませんでした。
なお、別の方からDirty Markupを紹介されました。
これは
１．コードを右側にペーストすれば、間違いを指摘
２．Cleanupで訂正できるみたいです。
https://co-jin.net/web/dirty-markup

これでだいぶ作業が進みます。しかし、意外と回答がなかったです。回答者様の回答は貴重です。

回答No.2

celtis

１、３６行目の</div>と３８行目の<div class="footer">の間に、
　　２０行目の<div class="main">を閉じるための</div>を追加しましょう。
　　これでエラーは消えるはずです。

２、26行目の<div class=contents></div>は不要なので消しておきましょう。

お礼

回答ありがとうございます。
今回のケースは一番最後の箇所が間違っているのではなくて、途中の行の入力ミスを修正して最後の箇所も自動的に修正されるのですね。

Progateには間違って入力した行に赤のマークなどがつく機能はないでしょうか。
私が知らないだけであれば教えてください。

また、EditorとしてCodePenを使っているのですか、入力ミスの箇所を警告してくれる機能はないのでしょうか

回答No.1

celtis

１、22行目の<div class="copy-container">に対応する</div>がありません。
　　<h2>プログラミングの世界へようこそ</h2>の下に追加しましょう。

２、26行目の<div class=contens>は、スペルミスとダブルクォート不足です。
　　正しくは<div class="contents">になります。

３、26行目の<div class="contents">に対応する</div>がありません。
　　改行を入れて追加しましょう。

４、29行目の<div class=contact-form>は、ダブルクォート不足です。
　　正しくは<div class="contact-form">になります。

補足

回答ありがとうございます。
再度試みたのですが、終了タグの設置がうまいこといきません。
https://streamable.com/fi7iuj
他が不都合があるので、そういう結果になるのでしょうか。

恐れ入りますが、アドバイスをお願いします。