LESSON 01 / 03 約4分
HTMLは、ページの骨組み
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
HTML＊1は、文章に「見出し」「段落」などの役割を付ける書き方です。多くの部分は、開始と終了のタグ＊2で囲みます。headにはページの設定、bodyには画面に見せる内容を置きます。
＊1 HTML：Webページの構造を表す言葉。
＊2 タグ：<h1>のように役割を指定する目印。
02 なぜ必要？
投稿の題名と本文を区別すれば、人にも読み上げ機能にも構造が伝わります。文字を大きくするためだけに見出しを使うのではなく、内容の役割を決めると、後からCSSで見た目を変えても分かりやすいページになります。
03 最小限のコード・図
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>みんなの投稿</title>
</head>
<body>
<h1>みんなの投稿</h1>
<p>今日できたことを共有しよう。</p>
</body>
</html>04 ここだけ理解する
- headは設定、bodyは表示する内容。
- h1は主な見出し、pは段落。
- 外側が親、内側が子という入れ子の関係になる。
05 覚えなくていいこと
すべてのタグ名は覚えなくてOK。作りたい内容の役割からAIに聞きましょう。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
投稿サイトのHTMLの基本構造を作ってください。headとbody、開始タグと終了タグ、親と子の関係を、このコードを使って初心者向けに説明してください。
07 AIの回答を見るポイント
- 日本語とスマホ向けの設定があるか。
- 見出しと本文を、役割に合ったタグで書いているか。
さらに確認する：公式ドキュメント ↗
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。