まず目標の確認ボタンをクリックして左上に目標となるページを出します。
そして下の編集後の確認ボタンをクリックして左下に現状のページを出します。
（出題しているこのページは、右に配置して、３つのウインドウが同時に見えるようにするとよいでしょう。）
そして、違いを確認しましょう。それから下記テキストを編集して編集後の確認ボタンで現状のページがどう変わったか確認します。いろいろと実験して最終的に、目標となるページと現状のページが同じになるように編集と確認を繰り返します。
←このボタンをクリックして表示するページと、
同じように見えるHTMLを、以下の■■■■を変更して作成してください。
なお、小文字を使っても影響がない範囲で小文字を使ってください。
<body>の中で使っているタグは、 div です。divのstyleは出現の順番で書いてください。
そして、それに必要なクラス名はxs, yw, zc
の順番で付けてください。
また、背景色では、
#CCFF00、
#FFCCFF、
#FFFF00、
#6699FF、
のいずれかを指定しています。
styleは、この背景色の後でwidthを、
300,250,200,150,100,50の
いずれかを指定します。
その後に、ほとんどの場合で、padding: 10px;、
float: left;、
float: right;、
clear: both;
のいずれかを指定します。
←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。
←目標と同じ結果が得られるように修正してからクリックください。（下の枠に出たメッセージの⇒をクリックすると、違うと判断される近辺の行が反転します）
←作り方はいろいろですが、わからない場合や正解しない場合は、答えを見て出題されるパターンを学習し、再度チャレンジしてください。
なお出題パターンは、ブラウザの更新操作で 異なる問題にできます。更新操作によりさまざまな問題にチャレンジして、このパターンのどんな問題でも答えを見ないで出来るまで何回でも行ってみましょう。タグなどを完全に暗記する必要はありませんが、タグの意味が理解できて、 作ったものがブラウザでどう反映されるかを想像できるようにすることが大切です。