1. 👋 はじめに

「Webページってどうやって表示されているの？」
「HTMLって何？タグって何？」
「フロントエンドエンジニアって何をする人？」

このシリーズでは HTML・CSS・TypeScript・React を使ったフロントエンド開発の基礎を、初心者向けにやさしく解説します！

このシリーズで目指すゴール：
TypeScript × React を使って、
動くWebアプリケーションを作れるようになること！

2. 🌍 Webページが表示されるまでの仕組み

ブラウザとサーバーの会話

Webページを開くとき、裏側では何が起きているのでしょう？

一言で言うと：
ブラウザが「これをください」とリクエストを送り、
サーバーが「どうぞ」とファイルを返す（レスポンス）やり取りです。
この通信の仕組みを HTTP（HyperText Transfer Protocol） と呼びます。詳しくは下記の記事もご覧ください。

💡 ブラウザの役割：「設計図」を「画面」に翻訳する

私たちが普段使っているブラウザ（ChromeやSafariなど）は、
サーバーから届いたHTMLなどの「設計図」を読み込んで、
人間が見やすい画面に翻訳（レンダリング）する役割を持っています。

<サーバーから届くもの（人間には読みにくい）>

  <h1>こんにちは</h1><p>これはWebページです</p>

              ↓ ブラウザが翻訳（レンダリング）
              
<画面に表示されるもの（人間が見やすい）>

【こんにちは】（大きな文字）
   これはWebページです（通常の文字）

フロントエンドとバックエンドの違い

	フロントエンド	バックエンド
場所	ブラウザ上で動く	サーバー上で動く
担当	見た目・操作感	データ処理・DB
技術	HTML・CSS・TypeScript・React など	Python・Node.js・Go・DB など
例え	お店の内装・接客	厨房・在庫管理

HTMLとCSS・JavaScriptの役割

🏠 Webページ = 建物に例えると

HTML  → 🏗️ 骨組み・構造
        「ここにタイトルがある」「ここにリストがある」

CSS   → 🎨 内装・デザイン
        「タイトルは赤色」「余白は20px」

TypeScript/JavaScript → ⚙️ 電気・水道
        「ボタンをクリックしたらメニューが開く」
        「データを取得して表示する」

3. 📄 HTMLとは？

一言で言うと

HTML（HyperText Markup Language）は
「Webページの構造を記述する言語」です。
タグと呼ばれる特別な記号でテキストを囲んで、
「これは見出し」「これはリスト」という意味を付けます。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ページの設定情報（ブラウザには表示されない） -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>私の最初のページ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ページの表示内容（ブラウザに表示される） -->
    <h1>こんにちは！</h1>
    <p>これは私の最初のWebページです。</p>
  </body>
</html>

部分	役割
`<!DOCTYPE html>`	「これはHTML5のファイルです」という宣言
`<html lang="ja">`	HTMLのルート要素・言語を日本語に設定
`<head>`	ブラウザへの設定情報（タイトル・CSSの読み込みなど）
`<body>`	実際にページに表示される内容

タグの書き方

<!-- 基本形：開始タグ・内容・終了タグ -->
<タグ名>内容</タグ名>

<!-- 例 -->
<h1>これは見出しです</h1>
<p>これは段落です</p>

<!-- 自己閉じタグ（終了タグが不要なもの） -->
<img src="photo.jpg" alt="写真" />
<br />
<hr />

💡 自己閉じタグの / について
HTML5 では <img> や <br> のように、スラッシュなしで書くのが標準です。
しかしこのシリーズでは あえて <img /> のようにスラッシュを付けています。
なぜなら、第四回以降で学ぶ React（JSX/TSX）では自己閉じスラッシュが必須 だからです。
最初から / を付ける習慣をつけておくと、Reactに移ったときにスムーズです。

4. 🏷️ よく使うHTMLタグ

見出しと段落

<!-- 見出し：h1が最大・h6が最小 -->
<h1>大見出し（ページタイトルに使う）</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

<!-- 段落 -->
<p>ここに本文のテキストを書きます。</p>

💡 h1 はページに1つだけにするのがマナー。
検索エンジンがページの内容を理解するためにも重要です。

リンクと画像

<!-- リンク：href にURLを書く -->
<a href="https://example.com">リンクのテキスト</a>

<!-- 同じサイト内のページへのリンク -->
<a href="/about">会社概要</a>

<!-- 新しいタブで開くリンク -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

<!-- 画像：src に画像のパス・alt に代替テキスト -->
<img src="photo.jpg" alt="山の写真" width="300" height="200" />

⚠️ alt は必ず書こう！
画像が表示できないとき・スクリーンリーダー（音声読み上げ）使用時に
alt のテキストが使われます。
アクセシビリティとSEOの両方に重要です。

リスト

<!-- 箇条書きリスト（順序なし） -->
<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

<!-- 番号付きリスト（順序あり） -->
<ol>
  <li>材料を準備する</li>
  <li>鍋に水を入れる</li>
  <li>沸騰させる</li>
</ol>

フォーム

<!-- ユーザーが入力するフォーム -->
<form action="/submit" method="post">
  <!-- テキスト入力 -->
  <label for="name">名前：</label>
  <input type="text" id="name" name="name" placeholder="山田 太郎" />

  <!-- メールアドレス入力 -->
  <label for="email">メール：</label>
  <input type="email" id="email" name="email" />

  <!-- パスワード入力 -->
  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password" />

  <!-- テキストエリア -->
  <label for="message">メッセージ：</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <!-- 送信ボタン -->
  <button type="submit">送信する</button>
</form>

テーブル

テーブルを構成するタグの意味：

タグ意味

<table> テーブル全体を囲む

<thead> ヘッダー行のグループ（見出し行）

<tbody> データ行のグループ（本体）

<tr> テーブルの1行（Table Row）

<th> 見出しセル（Table Header）・太字で表示される

<td> データセル（Table Data）・通常のテキスト

<table>
  <thead>
    <!-- tr = 1行 / th = 見出しセル -->
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <!-- tr = 1行 / td = データセル -->
    <tr>
      <td>田中 太郎</td>
      <td>25</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>鈴木 花子</td>
      <td>30</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
</table>

5. 🧱 セマンティックHTMLとは？

セマンティック（意味のある）タグ

セマンティックHTMLとは「意味のあるタグを使うこと」です。
<div> や <span> だけでなく、
「これはナビゲーション」「これは記事」という意味を持つタグを使います。

<!-- ❌ セマンティックでない書き方（divだらけ） -->
<div class="header">
  <div class="nav">
    <div class="nav-item">ホーム</div>
    <div class="nav-item">ブログ</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">記事のタイトル</div>
    <div class="content">記事の内容</div>
  </div>
</div>
<div class="footer">フッター</div>

<!-- ✅ セマンティックな書き方（意味のあるタグを使う） -->
<header>
  <nav>
    <a href="/">ホーム</a>
    <a href="/blog">ブログ</a>
  </nav>
</header>
<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>記事の内容</p>
  </article>
</main>
<footer>フッター</footer>

よく使うセマンティックタグ

タグ	意味	使う場所
`<header>`	ページ・セクションのヘッダー	サイトのロゴ・ナビゲーション
`<nav>`	ナビゲーションメニュー	メニュー・パンくずリスト
`<main>`	メインコンテンツ	ページの主要な内容
`<article>`	独立したコンテンツ	ブログ記事・ニュース記事
`<section>`	テーマ別のセクション	「サービス紹介」「お問い合わせ」など
`<aside>`	補足情報	サイドバー・関連リンク
`<footer>`	ページ・セクションのフッター	コピーライト・リンク集

なぜセマンティックHTMLが重要なのか

理由	説明
🔍 SEO	検索エンジンがページ構造を正しく理解できる
♿ アクセシビリティ	スクリーンリーダーがページを正確に読み上げられる
📖 可読性	コードを読んだ人がページ構造を理解しやすい
🎨 CSS適用	セマンティックタグをセレクターに使えて管理しやすい
🛠️ チーム開発・保守性	コンポーネントに分割する際「どこが共通パーツか」が一目でわかり、Reactでの開発管理が圧倒的に楽になる

6. 🏗️ HTMLの属性

属性とは？

属性はタグに追加情報を付けるものです。
<タグ名属性名="値"> の形で書きます。

<!-- href：リンク先のURL -->
<a href="https://example.com">リンク</a>

<!-- src：ファイルのパス、alt：代替テキスト -->
<img src="photo.jpg" alt="写真の説明" />

<!-- class：CSSやJSで要素を特定するためのクラス名 -->
<p class="description">説明文</p>

<!-- id：ページ内で一意の識別子 -->
<section id="about">会社概要セクション</section>

<!-- disabled：ボタンを無効化する -->
<button disabled>送信できません</button>

classとidの使い分け

	`class`	`id`
ページ内での重複	複数の要素に使える	ページ内で一意（1つだけ）
主な用途	CSSでスタイル適用	JavaScriptで特定の要素を操作
書き方（HTML）	`<p class="card">`	`<section id="about">`
書き方（CSS）	`.card { color: red; }`	`#about { background: blue; }`
書き方（JS/TS）	`document.querySelectorAll(".card")`	`document.getElementById("about")`

<!-- class：同じスタイルを複数の要素に適用したいとき -->
<p class="card">カード①</p>
<p class="card">カード②</p>  <!-- 同じclassを複数使えるのがポイント -->
<p class="card">カード③</p>

<!-- id：ページ内で1つだけの要素を特定するとき -->
<section id="about">会社概要セクション</section>
<section id="contact">お問い合わせセクション</section>

/* classはドット（.）で指定 */
.card {
  background: white;
  border: 1px solid gray;
  padding: 16px;
}

/* idはシャープ（#）で指定 */
#about {
  background: #f0f8ff;
}

7. 🎯 まとめ

概念	一言で言うと
🌐 HTTP	ブラウザとサーバーが通信するルール
📄 HTML	Webページの「骨組み・構造」を作る言語
🏷️ タグ	HTMLの構成要素・`<h1>` `<p>` `<a>` など
🧱 セマンティックHTML	意味のあるタグを使って構造を表現する
🏷️ 属性	タグに追加情報を付ける仕組み

HTMLは「Webページの設計図」です。
まずHTMLで骨格を作り、次回はCSSで見た目を整えていきます！

次回は CSS を解説します！
セレクター・ボックスモデル・Flexbox・レスポンシブデザインなど、
Webページを美しく整えるためのスタイリングを学びます🎨

💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!

🔗 シリーズ記事

【第一回】Webページの仕組み・HTML基礎（この記事）
【第二回】CSSで見た目を整える（近日公開）
【第三回】TypeScriptでインタラクションを作る（近日公開）
【第四回】React × TypeScriptの基礎（近日公開）
【第五回】React × TypeScriptの実践（近日公開）
【第六回】まとめ・開発環境・次のステップ（近日公開）