Step 2：HTML・CSS・JavaScript の基礎知識

コードを書く講座ではありませんが、AI に指示を出すとき「何を伝えればいいか」がわかるように、基本的な仕組みを理解しておきましょう。

Web ページは 3つの言語でできている

言語	役割	たとえると
HTML	ページの構造・内容	家の骨組み・間取り
CSS（Tailwind CSS）	見た目・デザイン	壁紙・家具・インテリア
JavaScript	動き・インタラクション	電気・水道・エアコン

この 3つが組み合わさって、普段見ている Web ページができています。

HTML — ページの「中身」を作る

HTML とは？

HTML（HyperText Markup Language） は、ページに「何を表示するか」を書くための言語です。

タグという目印で囲んで、テキストや画像の意味を伝えます。

タグの基本

<h1>これは見出しです</h1>
<p>これは段落（本文）です</p>

<h1> — タグの始まり（開始タグ）
</h1> — タグの終わり（終了タグ）
タグに挟まれた部分が コンテンツ

よく使うタグ一覧

タグ	意味	使い方
`<h1>` 〜 `<h6>`	見出し	`<h1>` が最大、`<h6>` が最小
`<p>`	段落（本文）	文章を書くときに使う
`<a>`	リンク	他のページへ移動するリンク
`<img>`	画像	写真やイラストを表示
`<div>`	グループ化	要素をまとめる箱
`<ul>` / `<li>`	リスト	箇条書き
`<button>`	ボタン	クリックできるボタン
`<table>`	表	データを表形式で表示
`<header>`	ヘッダー	ページ上部の領域
`<footer>`	フッター	ページ下部の領域
`<section>`	セクション	ページの区切り

HTML の構造

Web ページ全体は以下のような構造になっています：

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <p>ここに本文が入ります。</p>
  </body>
</html>

部分	役割
`<head>`	ページの設定（タイトル、CSS の読み込みなど。画面には表示されない）
`<body>`	実際に画面に表示される内容

属性（アトリビュート）

タグに追加情報を付けられます：

<a href="https://example.com">リンクテキスト</a>
<img src="photo.jpg" alt="写真の説明" />

属性	意味
`href`	リンク先の URL
`src`	画像ファイルのパス
`alt`	画像の説明文（画像が表示されないときに出る）
`class`	Tailwind のクラスを付けてスタイルを当てるための名前
`id`	要素を特定するための一意の名前

AI に伝えるとき： 「h1 の見出しを大きくして」「button の色を変えて」のように、タグ名で伝えると正確に伝わります。

Tailwind CSS — ページの「見た目」を整える

CSS とは？

CSS（Cascading Style Sheets） は、HTML で作った構造に 色・大きさ・配置 などの見た目を付けるための言語です。

今回の講座では CSS を直接書く代わりに Tailwind CSS を使います。

Tailwind CSS とは？

Tailwind CSS は、あらかじめ用意された クラス名 を HTML に書くだけでデザインできる CSS フレームワークです。

普通の CSS との違い

普通の CSS はこう書きます：

h1 {
  color: #2d5016;
  font-size: 32px;
  text-align: center;
}

Tailwind CSS なら、HTML の class に直接書けます：

<h1 class="text-green-800 text-3xl text-center">湯宿 やまざくら</h1>

メリット： CSS ファイルを行ったり来たりしなくて済む。AI も Tailwind のほうが効率的にコードを書けます。

よく使う Tailwind クラス一覧

文字のスタイル

クラス	意味	例
`text-sm` / `text-lg` / `text-3xl`	文字の大きさ	`text-xl`（大きめ）
`font-bold` / `font-normal`	文字の太さ	`font-bold`（太字）
`text-center` / `text-left` / `text-right`	文字の揃え方	`text-center`（中央）
`leading-relaxed` / `leading-loose`	行の高さ（行間）	`leading-relaxed`（ゆったり）
`tracking-wide`	文字間隔	`tracking-wide`（広め）

色

クラス	意味	例
`text-{色}-{濃さ}`	文字の色	`text-green-800`, `text-gray-600`
`bg-{色}-{濃さ}`	背景色	`bg-white`, `bg-green-50`
`text-white`	白文字	ヒーローの文字など
`bg-black/50`	半透明の背景	オーバーレイに使う

色の濃さは 50（薄い）〜 950（濃い）まで指定できます：

bg-green-50   → とても薄い緑
bg-green-200  → 薄い緑
bg-green-500  → 標準の緑
bg-green-800  → 濃い緑
bg-green-950  → とても濃い緑

AI に伝えるとき： 「背景を薄いグレーにして」「文字を text-green-800 にして」のように、日本語でもクラス名でも伝えられます。

サイズと余白

クラス	意味	例
`w-full` / `w-1/2` / `w-64`	横幅	`w-full`（100%）
`h-screen` / `h-64`	高さ	`h-screen`（画面いっぱい）
`p-4` / `p-8` / `px-6` / `py-12`	内側の余白	`p-8`（全方向に余白）
`m-4` / `mx-auto` / `mt-8`	外側の余白	`mx-auto`（中央寄せ）
`space-y-4`	子要素の縦間隔	`space-y-8`（要素間を空ける）

余白のサイズ： 数字は 4px 単位です。p-1 = 4px、p-2 = 8px、p-4 = 16px、p-8 = 32px

枠線と角丸

クラス	意味	例
`border` / `border-2`	枠線	`border border-gray-200`
`rounded` / `rounded-lg` / `rounded-full`	角の丸み	`rounded-xl`（大きく丸く）
`shadow` / `shadow-lg`	影	`shadow-lg`（大きめの影）

配置とレイアウト

クラス	意味	例
`flex`	横並び（フレックスボックス）	`flex gap-4`
`grid` / `grid-cols-3`	グリッドレイアウト	`grid grid-cols-3 gap-6`
`items-center`	縦方向の中央寄せ	`flex items-center`
`justify-center`	横方向の中央寄せ	`flex justify-center`
`gap-4` / `gap-8`	要素間の間隔	`flex gap-6`
`max-w-6xl` / `mx-auto`	コンテンツ幅の制限 + 中央寄せ	`max-w-6xl mx-auto`

具体例で見てみよう

カードコンポーネント

<div class="bg-white rounded-xl shadow-lg p-6">
  <img src="room.jpg" alt="客室" class="w-full h-48 object-cover rounded-lg" />
  <h3 class="text-xl font-bold mt-4">和室スタンダード</h3>
  <p class="text-gray-600 mt-2">8畳の落ち着いた和室</p>
  <span class="text-green-800 font-bold text-lg">¥15,000〜</span>
</div>

ボタン

<button class="bg-green-800 text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-green-700">
  ご予約はこちら
</button>

hover: を付けると、マウスを乗せたときのスタイルを指定できます。

レスポンシブデザイン（スマホ対応）

Tailwind では プレフィックス を付けるだけでスマホ対応ができます：

プレフィックス	画面サイズ	デバイス
（なし）	すべて	スマホ（デフォルト）
`sm:`	640px 以上	大きめのスマホ
`md:`	768px 以上	タブレット
`lg:`	1024px 以上	PC

<!-- スマホ: 縦1列 → PC: 横3列 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div>カード1</div>
  <div>カード2</div>
  <div>カード3</div>
</div>

Tailwind は モバイルファースト です。まずスマホ用のスタイルを書き、md: や lg: で PC 用のスタイルを追加します。

AI に伝えるとき： 「スマホでは縦1列、PCでは横3列にして」のように伝えればOKです。

JavaScript — ページに「動き」をつける

JavaScript とは？

JavaScript（JS） は、ページに動きや インタラクション を付けるための言語です。

JavaScript でできること

できること	例
ボタンを押したら何かが起きる	メニューの開閉、モーダル表示
スクロールに合わせたアニメーション	ふわっと表示、パララックス
フォームの入力チェック	「メールアドレスの形式が正しくありません」
データの取得・送信	予約フォームの送信

基本的な書き方

// ボタンがクリックされたらメッセージを表示
document.querySelector(".button").addEventListener("click", () => {
  alert("ご予約ありがとうございます！");
});

今日の講座では

LP の制作では JavaScript はほとんど使いません。必要な場合も AI が自動で書いてくれる ので、以下のことだけ知っておけば OK です：

JavaScript は動きを付けるもの
.js という拡張子のファイルに書く
エラーが出たら AI にエラーメッセージをそのまま見せる

3つの言語の関係

HTML・Tailwind CSS・JavaScript は以下のように連携しています：

HTML + Tailwind（構造 & 見た目を一体で書く）
├── <h1 class="text-green-800 text-5xl text-center font-bold">
│     湯宿 やまざくら
│   </h1>
│
│   text-green-800  ← 文字色を深緑に
│   text-5xl        ← 文字を大きく
│   text-center     ← 中央寄せ
│   font-bold       ← 太字
│
JavaScript（動き）
└── スクロールしたら h1 がふわっと表示される

ポイント： Tailwind では HTML と見た目が一体なので、AI にデザイン修正を頼むとき Tailwind のクラス名 を使うとより正確に伝わります。

AI への指示に使える用語集

AI に修正を頼むとき、以下の用語を使うとスムーズです：

やりたいこと	AI に伝える用語 / Tailwind クラス
文字を大きく/小さく	「`text-2xl` にして」「文字を大きくして」
文字を太く	「`font-bold` にして」
文字の色を変える	「`text-green-800` にして」「文字を深緑にして」
背景色を変える	「`bg-gray-100` にして」「背景を薄いグレーにして」
余白を増やす（内側）	「`p-8` にして」「パディングを広くして」
余白を増やす（外側）	「`mt-8` にして」「上のマージンを広くして」
中央寄せ	「`text-center` にして」「`mx-auto` で中央寄せ」
横に並べる	「`flex` で横並びにして」
グリッド3列	「`grid grid-cols-3` にして」
角を丸く	「`rounded-xl` にして」
影を付ける	「`shadow-lg` を付けて」
透明にする	「`opacity-50` にして」
スマホ対応	「`md:grid-cols-3` でPC3列、スマホ1列にして」
ホバー効果	「`hover:bg-green-700` にして」

もちろん「余白を増やして」「角を丸くして」のような日本語だけでも AI は理解してくれます。Tailwind のクラス名を使うとより 正確に 伝わる、ということです。

このステップのまとめ

HTML = ページの構造（タグで囲んで意味を付ける）
Tailwind CSS = ページの見た目（クラス名を付けるだけでデザインできる）
JavaScript = ページの動き（今日はほぼ AI 任せでOK）
AI への指示は 日本語でOK、Tailwind のクラス名を使うとより正確

基礎知識はここまで！次はいよいよ AI（Antigravity）の使い方を覚えましょう。