Day 1・HTMLの構造 — 骨組みを読む
リンク・画像・リスト・フォーム — 部品の基本
a・img・ul/ol・form といった定番部品を読み書きし、入力欄を「受付用紙」としてイメージできるようになる。
ここまでで構造の読み方がわかりました。最後に、どのページにも必ず出てくる定番部品を4つ押さえます。リンク、画像、リスト、フォームです。この4つを読めれば、AIが作るページの中身の8割は追えるようになります。
まずリンクは a要素です。href 属性に飛び先を書きます。「押すと別のページへ移動する文字や画像」はほぼ a だと思ってよいです。
<a href="/contact">お問い合わせはこちら</a>次に画像は img要素です。中身を持たないので閉じタグはありません。src 属性で「どの画像ファイルか」を、alt 属性で「画像が表示できないときの代わりの文章」を指定します。
<img src="/logo.png" alt="当社ロゴ">alt を省略しない理由
alt は、通信が遅くて画像が出ないときや、目の不自由な人が読み上げソフトを使うときに、その画像が何かを伝える文章です。省略すると情報が消えてしまいます。alt はを支える大事な属性なので、AI生成コードでも空になっていないか確認しましょう。
リストは項目の箇条書きです。順番が関係ない箇条書きは ul、順番に意味がある番号付きは ol を使い、どちらも中の各項目を li で囲みます。レッスン2の入れ子の代表例です。
<ol>
<li>会員登録する</li>
<li>商品を選ぶ</li>
<li>支払う</li>
</ol>最後がフォームです。名前や問い合わせ内容を入力してもらう部分で、全体を form で囲み、中に input(1行入力)や textarea(複数行入力)、button(送信ボタン)を置きます。label は入力欄の見出しで、for 属性で対応する入力欄と結びつけます。
たとえるなら
フォームは病院の受付用紙です。form が用紙全体、label が各項目の見出し(お名前・ご住所)、input がその横の記入欄、button が受付に提出するボタン。この対応で見ると、フォームのHTMLは一気に読みやすくなります。
<form>
<label for="name">お名前</label>
<input id="name" type="text">
<button type="submit">送信</button>
</form>input の type を読み分ける
input は type 属性で役割が変わります。type="text" は普通の文字、type="email" はメール向き、type="password" は伏せ字。AI生成フォームを読むときは、まず各 input の type を確認すると、その欄が何を入れる場所かがすぐわかります。
AIにはこう頼む
フォームを直したいときは「お名前・メール・お問い合わせ内容の3項目があるお問い合わせフォームを、label と input を for と id でペアにして作って」のように、項目と結びつけ方まで具体的に頼むと、読みやすく正しいコードが返ってきます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
img要素で「画像が表示できないときの代わりの文章」を指定する属性はどれですか。
手順のように順番に意味がある箇条書きに最も適したタグはどれですか。
フォーム(form / label / input / button)の役割を、受付用紙のたとえで説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。