HTMLで自己紹介ページを作ろう（動画補足版）

🟥 1. アイキャッチ（タイトル＋動画サムネ）

目的： 一目で内容と動画の関係が分かるようにする。
内容例：

🎥 【動画補足】HTMLで自己紹介サイトを作ろう！

下にYouTube埋め込み or 「▶動画を見る」ボタン

（動画埋め込みタグ or iframe）

🟧 2. 冒頭リード（つながりを明示）

「動画で紹介した“自己紹介サイト”を、もう一度復習してみよう！」
このページでは、動画で使ったコード・ポイントを短くまとめています。
初めての人でも、この記事を読めば3分でHTMLの基本構造がつかめます。

🟨 3. 今日のゴール（内容を先出し）

💡この記事で学べること

HTMLとは何か（＝意味のある箱を積む）

最小構成の書き方

よく使うタグと意味

公開前チェックポイント3つ

🟩 4. 完成コード（全文掲載）

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タケルのページ</title>
  </head>
  <body>
    <header>
      <h1>タケルのページ</h1>
      <nav>
        <a href="#about">自己紹介</a>
        <a href="#works">作品</a>
      </nav>
    </header>

    <main>
      <section id="about">
        <h2>自己紹介</h2>
        <p>学生エンジニアのタケルです。</p>
      </section>

      <section id="works">
        <h2>作品紹介</h2>
        <img src="myapp.png" alt="自作アプリの画像">
        <ul>
          <li>Todoアプリ</li>
          <li>クイズサイト</li>
          <li>お天気ビューア</li>
        </ul>
      </section>
    </main>

    <footer>© 2025 Takeru</footer>
  </body>
</html>

📎 ポイント：

<head>：設定エリア（タイトルや文字コードなど）
<body>：実際に画面に出る部分
<section>：テーマごとのブロック

🟦 5. よく使うタグまとめ

タグ	読み方	意味	よく使う場面
`<h1>`	エイチワン	見出し	サイト名など
`<p>`	ピー	段落	文章を書く
`<header>`	ヘッダー	ページ上部	タイトル・ナビ
`<main>`	メイン	本文	コンテンツの中心部
`<section>`	セクション	まとまり	自己紹介・作品など
`<img>`	イメージ	画像表示	写真・イラストなど
`<a>`	アンカー	リンク	他ページや外部サイトへ