今日は設計図をプロっぽく書ける時間テクニックの紹介だね。
前回、タグは設計図でそれを書くにはルールが必要だって言ってたよね。
そう。HTMLは「意味」と「構造」を伝える。タグは開始と終了のセット 。head＝設定、body＝中身。それから、おまじない。<!DOCTYPE html>：ブラウザに「これは最新のHTML5ですよ」と教える宣言。<meta charset="UTF-8">：これがないと文字化けして、せっかく書いた日本語が「＄％＆％＄// 」になってしまう。<title>：検索結果やブラウザのタブに表示される超重要な名前。
頭がショートしそう。
分解すれば簡単。例えば、『扉』という記号（タグ）だけじゃ、どっちに開くか、何色か分からないよね？それを詳しく指定するのが『属性』なんだ。
なるほど。srcなら『画像の種類（住所）』、altなら『画像の説明文』っていう追加情報をセットにしてあげるってことか！
<img src=”image.jpg” alt=”猫の写真”>
要素：<img>：部材の種類
（例：「窓」「ドア」「壁」HTML：<img>（画像という部材を置く）属性：
srcalt：カスタマイズ（仕様）の項目
（例：「ガラスの種類」「鍵のタイプ」「色」。HTML：src（どこのデータか）、alt（説明））属性値：
"image.jpg"：具体的な中身（スペック）
（例：「強化ガラス」「ディンプルキー」「白」/ HTML："image.jpg"、"猫の写真"）
なるほど！<img>だけだと『ここに窓を付ける』までしか決まってなくて、srcという属性で『透明なガラス』にするか『曇りガラス』にするか選ぶ…みたいな感じか！
alt は優しさ。必ず書こう。
- 目が不自由な人が使う「読み上げソフト」がこの文字を読む。
- 電波が悪くて画像が出ない時に、代わりにこの文字が出る。
Live Serverで簡単チェック
「HTMLの全体像を人間に例えると、もっとイメージしやすいよ！」
<html>：「人間そのもの」（全体を包む外枠）<head>：「脳みそ」（名前や知識などの設定。外からは見えない）<body>：「体」（服や顔など、実際に見えるすべてのパーツ）
なるほど！僕たちがブラウザで見てるのは「体（body）」の部分だけで、見えない「脳みそ（head）」が裏で支えてるんだね。
その通り！でも、脳みそ（head）が『文字化けしないように』とか『この名前で検索に引っかかるように』って司令を出しているから、正しく表示されるんだよ。
設計図を書いても、実際にどう見えるか確認できないと不安だよね。
VS Codeには『Live Server』という拡張機能があるんだ。これを入れれば、コードを保存した瞬間にブラウザの画面が更新されるよ！
えっ、いちいちページを読み込み直さなくていいの？ それは時短になるね！
Emmetで楽して時短
【やってみよう！VS Codeで時短体験】
- VS Codeで
imgとだけ入力する。- キーボードの Tabキー を押す。
- 一瞬で
<img src="" alt="">が完成！サポちゃのワンポイントアドバイス：
「半角英数」で入力しないと反応しないから注意してね！
全部手打ちしなくていいの！
VS Codeなら、これだけでOK。「楽をする技術」も実力だよ。
h1→<h1></h1>img→<img src="" alt="">ul>li*3→<ul><li></li><li></li><li></li></ul>になるよ！
すごい便利！必要な要素を勝手に補って書き出してくれるんだ！
タグや属性を書くときは、必ず『半角英数』で打ってね。全角のスペースが１つ入るだけで、設計図（コード）はエラーで動かなくなっちゃうんだ。これはプロでもよくやるミスだよ！
まとめ
- タグは「要素＋属性」でできている
- Emmetで作業時間を激減できる
- 正確さより「慣れる」が最初は大事
次回はいよいよ フォーム制作 に挑戦。
詳細な免責事項や広告に関するポリシーについては、[免責事項ページへのリンク]をご確認ください。
学校の勉強に使てる「HTML＆CSSwebデザイン入門講座」順番にやっていけば簡単にサイト完成までの道筋が示してあるので、すごくわかりやすいですよ。
