まさまさのガジェット発見ラボ

【第3回】VS Codeで爆速！タグの仕組みとEmmet入門

2026.01.15

サポちゃ

今日は設計図をプロっぽく書ける時間テクニックの紹介だね。

まさまさ

前回、タグは設計図でそれを書くにはルールが必要だって言ってたよね。

サポちゃ

そう。HTMLは「意味」と「構造」を伝える。タグは開始と終了のセット。head＝設定、body＝中身。それから、おまじない。
<!DOCTYPE html>：ブラウザに「これは最新のHTML5ですよ」と教える宣言。
<meta charset="UTF-8">：これがないと文字化けして、せっかく書いた日本語が「＄％＆％＄// 」になってしまう。<title>：検索結果やブラウザのタブに表示される超重要な名前。

まさまさ

頭がショートしそう。

サポちゃ

分解すれば簡単。例えば、『扉』という記号（タグ）だけじゃ、どっちに開くか、何色か分からないよね？それを詳しく指定するのが『属性』なんだ。

まさまさ

なるほど。srcなら『画像の種類（住所）』、altなら『画像の説明文』っていう追加情報をセットにしてあげるってことか！

<img src=”image.jpg” alt=”猫の写真”>

要素：<img> ：部材の種類
（例：「窓」「ドア」「壁」HTML：<img>（画像という部材を置く）

属性：src alt：カスタマイズ（仕様）の項目
（例：「ガラスの種類」「鍵のタイプ」「色」。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デザイン入門講座」順番にやっていけば簡単にサイト完成までの道筋が示してあるので、すごくわかりやすいですよ。

リンク


木曜先勝己丑	令和8年 15	01月睦月