カテゴリGの入口——解析される中身を読む
D-09で、ブラウザが受け取ったHTMLを解析して画面を組み立てる、という流れを見ました。あのとき解析されていた中身が、まさにこれから読むHTMLです。カテゴリGでは、その中身を自分の目で読めるようにしていきます。読めるようになると、AIが生成した画面に対して「どこを、どう直してほしいか」を正確に指し示せるようになります。ここがカテゴリG全体の出発点になります。
このスライドのポイント
- D-09: ブラウザは受け取ったHTMLを解析して画面を組み立てる、と学んだ
- カテゴリGでは、その解析される「中身」を自分で読めるようにする
- 読めると、AIが作った画面に対し「どこを直すか」を正確に指せる
HTML・タグ・要素・属性の定義
HTMLとは、内容の意味と階層をブラウザへ伝える記述言語です。タグは、h1のような目印の記号を指します。要素は、開始タグと中身と終了タグを合わせたひとまとまりのことです。属性は、要素に付ける追加情報で、リンク先を示すhrefなどがこれにあたります。そして、見出しのh1から始まる階層、段落のp、一覧のulとli、リンクのaが、文書を組み立てる基本部品になります。まずはこの四つの言葉を、自分の言葉で言い分けられるようにしましょう。
このスライドのポイント
- HTML＝内容の意味と階層をブラウザへ伝える記述言語
- タグ＝
<h1>のような目印の記号 - 要素＝開始タグ＋中身＋終了タグのひとまとまり
- 属性＝要素に付ける追加情報（リンク先を示すhrefなど）
- 基本部品: 見出し（h1〜）・段落（p）・一覧（ul/li）・リンク（a）
なぜ必要か——指示の対象を指せるようにする
この区別を知らないと、AIが生成した画面の構造が読めません。すると、たとえば「この見出しを変えてください」と頼みたくても、その指示の対象を正しく指せなくなります。また、見出しのレベルがいきなり飛んでいる、といった構造の乱れにも気づけません。構造は目に見えにくい部分ですが、後で扱う検索や読み上げに直結する、とても大事な土台です。ここを読めるかどうかが、AIへの指示の精度を左右します。
このスライドのポイント
- 構造を読めないと、AIが生成した画面の中身が理解できない
- 「この見出しを変えて」と頼みたくても、指示の対象を指せない
- 見出しレベルの飛びなど、構造の乱れにも気づけない
構造——入れ子の箱と木構造
HTMLの構造は、入れ子になった箱として捉えると分かりやすくなります。bodyという大きな箱の中に、見出しのh1、段落のp、一覧のulが並び、そのulの中にはさらにliが入ります。親となる箱の中に子の箱が入り、その子の中にまた子が入る、という形です。これは、B-04で見たフォルダのツリーとまったく同じ木構造です。文書全体が、この階層のかたちで組み立てられていると考えてください。
このスライドのポイント
- HTMLの構造は「入れ子になった箱」として捉える
- body ＞ h1・p・ul、さらに ul ＞ li の階層
- この形はB-04で見たフォルダのツリーと同じ木構造
具体例——日報ページの骨組み
具体例として、日報ページの骨組みを見てみましょう。タイトルは見出しのh1、日付は段落のp、その日の作業項目は一覧のulとliで表します。詳細ページへ移動するリンクは、aを使います。ここまで、色や大きさといった見た目の装飾は一切していません。それでも、どれが見出しで、どれが一覧なのか、という構造は完全に伝わります。意味を持つ部品を選ぶだけで、ページの骨組みはきちんと成立するのです。
このスライドのポイント
- タイトル＝h1、日付＝p、作業項目＝ul/li、詳細ページへ＝a
- 見た目の装飾は一切していないのに、構造は完全に伝わる
- 意味を持つ部品を選ぶだけで骨組みが成立する
技術サンプル——日報ページのHTML
サンプルを見ていきます。種別はcode、日報ページのHTMLです。読むときの要点は三つあります。一つ目は、開始タグと終了タグで中身を挟んでいること。二つ目は、一覧を表すulの中に、項目のliが入る入れ子の構造になっていることです。三つ目は、aに付いたhrefが、リンク先を示す属性であることです。AIには「このページの見出し構造をh1からh3まで一覧で見せてください」と頼むと、見出しの階層に乱れがないかを確認できます。
このスライドのポイント
- 種別: code
- 目的: 日報ページの骨組みを、タグ・要素・属性の実物で読む
- サンプル本体:
混同しやすい概念——タグと要素
混同しやすいのが、タグと要素です。タグは、h1のような目印となる記号そのものを指します。一方の要素は、そのタグで挟まれた中身まで含めた、ひとまとまりを指します。日常の会話では、この二つがしばしば混ぜて使われますが、指しているものは別のものです。AIとやり取りするときに、この区別ができていると、どこを直してほしいのかを正確に伝えられるようになります。似た言葉ほど、意味の線引きを意識しておきましょう。
このスライドのポイント
- タグ＝目印となる記号そのもの
- 要素＝そのタグで挟まれた中身も含むひとまとまり
- 会話では混用されるが、指すものは違う
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIに画面を作らせたら、まず「見出しはh1から順になっていますか」を確認してください。見出しのレベルがいきなり飛んでいると、構造としては乱れています。この構造の正しさは、後のG-03やG-10で扱う、検索エンジンや支援技術への伝わりやすさに、そのまま直結します。早いうちに整えておくほど、直す手間は小さく済みます。作った直後こそ、構造を点検する好機だと考えてください。
このスライドのポイント
- AIに画面を作らせたら「見出しはh1から順になっていますか」を確認
- 見出しレベルの飛びは構造の乱れ
- 構造の正しさは後のG-03・G-10（検索・支援技術）に直結する
一問一答とまとめ
最後に一問一答です。href イコール スラッシュ detail の、この href を何と呼ぶでしょうか。……答えは、属性です。要素に付ける追加情報のことでした。三十秒でまとめます。HTMLは見た目ではなく構造を伝える言語であり、タグは目印の記号、要素は開始タグから終了タグまでのひとまとまり、属性は要素に付ける追加情報でした。次回は、このHTMLがブラウザの中でどう表現されるか、DOMへ進みます。関連資料は「Webアプリ構成図入門」と「AI開発ワード100」です。
このスライドのポイント
- 一問一答:
href="/detail"の href を何と呼ぶ？ → 属性 - 30秒まとめ: HTMLは構造を伝える言語／タグは目印・要素はひとまとまり・属性は追加情報
- 次回: このHTMLがブラウザ内でどう表現されるか＝DOMへ
- 関連資料: 「Webアプリ構成図入門」「AI開発ワード100」
