HTMLはWebページの「骨格（構造）」を、CSSは「見た目（スタイル）」を担当する。ReactやNext.jsを使う場合でも、最終的にブラウザに届くのはHTMLとCSSである。JSXはHTMLに見えるがJavaScriptのコードであり、その背後にHTMLの概念が存在する。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>
      <h1>見出し</h1>
      <p>本文テキスト</p>
    </article>
  </main>
  <footer>...</footer>
</body>
</html>

セマンティックHTML: 見た目ではなく「意味」で要素を選ぶ。<div> ばかり使わず、<header>・<nav>・<main>・<article>・<section>・<footer> を使うことでアクセシビリティとSEOが向上する。

よく使うHTML要素

<!-- テキスト -->
<h1>〜<h6>   見出し（h1が最重要、1ページに1つが推奨）
<p>          段落
<span>       インライン要素（テキストの一部にスタイルを当てる）

<!-- リスト -->
<ul><li>     順序なしリスト
<ol><li>     順序ありリスト

<!-- フォーム -->
<form>
  <input type="text" placeholder="名前">
  <input type="email">
  <input type="password">
  <textarea>
  <button type="submit">送信</button>
</form>

<!-- その他 -->
<a href="/about">リンク</a>
<img src="/logo.png" alt="ロゴ">
<div>        汎用コンテナ（意味がないとき）

CSSボックスモデル

すべてのHTML要素は「ボックス」として扱われる：

┌─────────────────────────┐
│         margin          │  外側の余白
│  ┌─────────────────┐   │
│  │     border      │   │  枠線
│  │  ┌───────────┐  │   │
│  │  │  padding  │  │   │  内側の余白
│  │  │ ┌───────┐ │  │   │
│  │  │ │content│ │  │   │  実際のコンテンツ
│  │  │ └───────┘ │  │   │
│  │  └───────────┘  │   │
│  └─────────────────┘   │
└─────────────────────────┘

.card {
  margin: 16px;          /* 外側の余白 */
  padding: 24px;         /* 内側の余白 */
  border: 1px solid #eee;
  border-radius: 8px;    /* 角丸 */
}

Flexboxレイアウト

横並び・縦並びを柔軟に制御する：

.container {
  display: flex;
  flex-direction: row;          /* row（横）| column（縦） */
  justify-content: space-between; /* 主軸方向の配置 */
  align-items: center;          /* 交差軸方向の配置 */
  gap: 16px;                    /* 要素間の隙間 */
}

CSS Gridレイアウト

2次元（縦横）のレイアウト：

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3列（比率1:2:1） */
  gap: 16px;
}

レスポンシブデザイン

画面幅に応じてレイアウトを変える：

/* モバイルファースト */
.container {
  width: 100%;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

CSS変数とTailwind CSS

CSS変数（カスタムプロパティ）:

:root {
  --color-primary: #0ea5e9;
  --spacing-4: 16px;
}
.button { background-color: var(--color-primary); }

Tailwind CSS: ユーティリティクラスを組み合わせてスタイルを書くアプローチ。Next.jsでの開発でよく使われる。

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  送信
</button>

参考リソース

MDN HTML Reference（https://developer.mozilla.org/ja/docs/Web/HTML）
MDN CSS Reference（https://developer.mozilla.org/ja/docs/Web/CSS）
Flexbox Froggy（https://flexboxfroggy.com/#ja）— Flexboxをゲームで学べる
CSS Grid Garden（https://cssgridgarden.com/#ja）— CSS Gridをゲームで学べる
Tailwind CSS公式（https://tailwindcss.com/docs）

確認クイズ

Q1. HTMLにおけるセマンティックHTMLの説明として正しいものはどれか。　A. すべての要素にidを付与する　B. 見た目ではなく「意味」に基づいて要素を選ぶ　C. divタグをできるだけ多く使う　D. インラインスタイルを使わない

正解: B. 見た目ではなく「意味」に基づいて要素を選ぶ

解説: <header> <nav> <main> <article> <footer> などセマンティックな要素を適切に使うことで、アクセシビリティとSEOが向上する。divは意味がないときの汎用コンテナとして使う。

Q2. CSSボックスモデルの内側から外側への順序として正しいものはどれか。　A. margin → border → padding → content　B. content → padding → border → margin　C. padding → content → margin → border　D. content → border → padding → margin

正解: B. content → padding → border → margin

解説: ボックスモデルは内側から「content（実際のコンテンツ）→ padding（内側の余白）→ border（枠線）→ margin（外側の余白）」の順に構成される。

Q3.

タグに関する推奨事項として正しいものはどれか。

正解: 1ページに1つが推奨される

解説: <h1> はページ内で最も重要な見出しを表し、SEOや検索エンジンのクローラーがページの主題を把握するために参照する。複数使うとその優先度が下がるため、1ページ1つが推奨される。

Q4. Flexboxの justify-content と align-items の違いを説明してください。

正解: justify-contentは主軸方向の配置を制御し、align-itemsは交差軸方向の配置を制御する

解説: flex-direction: row（デフォルト）の場合、justify-contentが横方向、align-itemsが縦方向の配置を制御する。space-between や center などの値で柔軟にレイアウトを調整できる。

Q5. grid-template-columns: 1fr 2fr 1fr と指定したとき、3列の幅の比率はどうなるか。

正解: 1:2:1 の比率

解説: fr はフラクション（分数）単位で、利用可能なスペースを比率で分割する。1fr 2fr 1fr は全体を4等分し、左から1/4・2/4（1/2）・1/4の幅になる。

Q6. レスポンシブデザインで @media (min-width: 768px) が意味することはどれか。　A. 768px以下の画面に適用　B. 768px以上の画面に適用　C. ちょうど768pxの画面に適用　D. 768px未満の画面には適用しない（768px以上に適用）

正解: B / D（768px以上の画面に適用）

解説: モバイルファーストのアプローチでは、デフォルトのスタイルがモバイル向けで、min-width メディアクエリを使って画面が広くなるにつれてスタイルを追加・上書きする。

Q7. CSS変数（カスタムプロパティ）を定義する場所として一般的に使われるセレクタはどれか。　A. body　B. html　C. :root　D. *

正解: C. :root

解説: :root はHTMLドキュメントのルート要素（<html>）を指し、ここに定義したCSS変数はドキュメント全体から参照できる。デザイントークン（色・スペーシングなど）を一元管理するために使われる。

Q8. 要素の用途として正しいものはどれか。　A. ブロック要素として段落を作る　B. テキストの一部にインラインでスタイルを当てる　C. ページのフッターを定義する　D. 画像を表示する

正解: B. テキストの一部にインラインでスタイルを当てる

解説: <span> は意味を持たないインライン要素で、テキストの特定の部分に色やサイズなどのスタイルを適用したいときに使う。ブロックレベルの汎用コンテナは <div> を使う。

Q9. Tailwind CSSの className="bg-blue-500 text-white px-4 py-2 rounded" について、px-4 と py-2 はそれぞれ何を意味するか。

正解: px-4 は左右（横方向）のpadding、py-2 は上下（縦方向）のpadding

解説: Tailwindでは p がpadding、x が左右方向、y が上下方向を示す。数値はスペーシングのスケール（4 = 1rem = 16px など）に対応する。

Q10. ReactやNext.jsを使う場合、HTMLとCSSの基礎知識はなぜ必要か。

正解: ReactのJSXは最終的にHTMLに変換されてブラウザに届くため。JSXの背後にはHTMLの概念が存在し、スタイルはCSSで適用される

解説: JSXはJavaScriptのコードであってHTMLではないが、書き方はHTMLに似ており、ブラウザへの出力は最終的にHTML/CSSになる。ボックスモデル・Flexbox・セレクタの理解がないと、思い通りのレイアウトを実装できない。

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

対応 Week: W2 / W12
参照ブランチ:
W2: reference/week-2
W12: reference/week-12
対応 checklist 項目: M2, M3

ブランチの作り方・見方は b00-curriculum-map を参照してください。