暗記よりも「直せるか」を目安にする
タグやプロパティを全部覚える必要はありません。一方、教材のコードを写すだけでは、違う文章や画像を入れたときの崩れに対応できません。最初は小さなページで、構造と表示を結び付けて理解しましょう。
優先したい4つの範囲
| 範囲 | 練習すること |
|---|---|
| 文章の構造 | 見出し・段落・リスト・リンクを意味に合わせて使う |
| 余白と配置 | ボックスモデル、FlexboxやGridで配置する |
| スマホ対応 | 固定幅に頼らず、画面幅で並び方を変える |
| 確認 | 開発者ツールで適用された指定を調べる |
見た目だけのために見出しの順序を飛ばすのではなく、文章の関係を保ちます。画像には内容に応じた代替テキストを考え、リンクには行き先が分かる言葉を使いましょう。
小さな課題で確認する
架空の教室案内を作り、講座名、時間、料金の一覧、問い合わせへのリンクを置きます。文章を倍に長くしても重ならないか、キーボードでリンクを選べるか、スマートフォン幅で読めるかを確認します。教材と違う条件で動かすと理解不足を見つけやすくなります。
後から学ぶ機能を切り分ける
複雑なアニメーションや多段階のフォーム処理を最初から扱う必要はありません。ただし、動かないフォームを実用の問い合わせフォームとして公開してはいけません。見た目の練習と、実際に情報を送受信する仕組みを区別してください。
次に進む前の確認
余白ができた理由を説明できるか、意図しない横スクロールを直せるか、リンク切れを探せるかを見ます。解決できないときは、再現する小さなコードと期待する表示を整理して質問しましょう。
参照：MDNのWeb開発学習。仕様や書き方は公式資料で確かめてください。