90分で身につく！HTML＋CSS 基礎のキソ | ＨＴＭＬ＆ＣＳＳ＆ＪａｖａＳｃｒｉｐｔ

🔷HTML・CSS基礎コース（90分）カリキュラム

対象：HTML/CSS未経験者

🕒 時間配分イメージ

時間帯	内容	備考
0～10分	導入：HTML/CSSとは	目的、役割、Webのしくみ（HTMLは骨、CSSは服）
10～35分	HTMLの基本構造とタグ	タイトル、見出し、段落、リンク、画像など
35～60分	CSSの基本とデザイン体験	色・文字サイズ・枠線・配置など
60～80分	フォーム作成	入力欄、ラジオボタン、チェックボックス、送信ボタン
80～90分	総まとめと質疑応答	質問・簡単な演習まとめ

🔸カリキュラム

1. HTMLとは？（10分）

Webページの土台
ブラウザとサーバーの関係
タグの概念（<タグ名> ～ </タグ名>）

2. HTMLの基本タグ（25分）

<!DOCTYPE html> から始まる基本構造
よく使うタグの説明＋実践
- <h1>～<h3>：見出し
- <p>：段落
- <a href="#">：リンク
- <img src="..." alt="">：画像
- <ul> / <ol> / <li>：リスト

📄【演習例】

<h1>はじめてのHTML</h1>
<p>これは段落です。</p>
<a href="https://example.com">リンクはこちら</a>
<img src="cat.jpg" alt="ネコの画像">

3. CSSの基本（25分）

style 属性と <style> タグの使い方
セレクタとプロパティの基本
- color, font-size, background-color, border, padding
外部CSSの書き方（簡単に紹介）

🎨【演習例】

<style>
  h1 {
    color: blue;
    background-color: lightgray;
    padding: 10px;
  }
</style>

4. フォームを作ろう（20分）

入力フォームとは（ユーザーとの接点）
よく使うフォーム要素
- <form>, <input>, <textarea>, <select>, <button>
- type="text", radio, checkbox, submitの違い

📝【演習例】

<form action="#" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name"><br><br>

  <label>性別:</label>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女<br><br>

  <label for="hobby">趣味:</label>
  <input type="checkbox" name="hobby" value="music"> 音楽
  <input type="checkbox" name="hobby" value="sports"> スポーツ<br><br>

  <input type="submit" value="送信">
</form>

5. まとめと質疑応答（10分）

今日学んだことの振り返り
HTML＋CSSの関係再確認
質問コーナー
「無料で学べるサイト」紹介（ドットインストール、Progate、MDN など）

✅ 備考・補足資料の提案

配布資料：HTML/CSSリファレンス（よく使うタグ一覧）
オンラインツール：codepen.io や jsfiddle.net を使って実演
発展紹介：JavaScriptやレスポンシブデザインがあることも紹介

🟦 1. HTMLとは？（10分）

🎯 目的

Webページの構成要素を理解する
HTMLが「見えない骨組み」であることを体感してもらう
タグの基本的な使い方に慣れる

✅ はじめに：HTMLってなに？

**HTML（エイチ・ティー・エム・エル）**は
HyperText Markup Languageの略です。

これは、Webページの内容と構造を記述する言語です。
たとえば「見出し」「段落」「画像」「リンク」など、**ページにある要素を“どういうものか”伝えるためのマーク（記号）**を使って書きます。

🖼️ イメージ：HTMLは“ページの骨組み”

**Webページの「設計図」や「骨格」**です
実際の見た目を整えるのはCSS
例えるなら…
- HTML＝家の骨組みや部屋の配置
- CSS＝壁紙や家具などの装飾

🌐 ブラウザとサーバーの関係（超ざっくり）

要素	説明
サーバー	Webページのデータ（HTMLファイルなど）を保存している倉庫みたいなもの
ブラウザ	Google Chromeなど。HTMLを読み取って「画面に表示する役割」
流れ	ブラウザが「このページください！」とサーバーにリクエスト → HTMLが送られてくる → ブラウザが読んで表示

🏷️ タグの概念（超基本）

HTMLは「タグ」という記号で囲んで書きます。
タグは“ここは何か”を表す印です。

<tag名> ここが内容 </tag名>

例えば👇

構文	意味
`<h1>こんにちは</h1>`	h1（大見出し）です
`<p>これは段落です。</p>`	p（パラグラフ）＝段落

✍️ 実例：HTMLの最小ページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これはHTMLの練習ページです。</p>
  </body>
</html>

🔍 これはどういう意味？

タグ	意味
`<!DOCTYPE html>`	HTMLの文書だよ、という宣言
`<html>`	ページ全体の始まり
`<head>`	タイトルや文字コードの情報（表示はされない）
`<body>`	実際に画面に見える内容
`<h1>`	一番大きな見出し
`<p>`	段落（文章）

🧪 ワンポイント演習（任意）

HTMLファイルとして保存して、ブラウザで開いてもらう：

メモ帳やVSCodeで上のコードを貼る
sample.html で保存
ブラウザで開く → 実際に表示される！

次の「2. HTMLの基本タグ」では、この骨組みの中に「リンク」「画像」「リスト」などを加えていきます。

🟦 2. HTMLの基本タグ（25分）

🎯 目的

よく使うHTMLタグの「種類」と「使い方」を理解する
自分で簡単なページが作れるようになる

🧱 HTMLの基本構造をおさらい

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <!-- ここに中身（本文）を書く！ -->
  </body>
</html>

→ 中身は <body> の中に書いていく！

📚 よく使うHTMLタグと例

🟡 ① 見出しタグ：`<h1>` ～ `<h6>`

<h1>いちばん大きな見出し</h1>
<h2>2番目の見出し</h2>
<h3>3番目の見出し</h3>

➡ 数字が大きくなるほど、小さな見出しになります。

🟡 ② 段落：`<p>`

<p>これは文章の段落です。</p>
<p>改行もされて、読みやすくなります。</p>

➡ テキストを「ひとかたまり」にするときに使います。

🟡 ③ 改行：`<br>`

こんにちは！<br>
改行されました。

➡ 文章中でちょっとだけ改行したいときに。

🟡 ④ リンク：`<a href="">`

<a href="https://example.com">サンプルページへ</a>

➡ href="" にリンク先URLを書きます。

🟡 ⑤ 画像：`<img src="..." alt="...">`

<img src="cat.jpg" alt="かわいいネコ">

src: 画像ファイルの場所
alt: 読み上げブラウザや画像が見えない人用の説明

✅ imgは**閉じタグが不要な「空要素」**です！

🟡 ⑥ リスト：順序あり/なし

🔸 順序なしリスト（●のリスト）

<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

🔸 順序ありリスト（1. 2. 3.）

<ol>
  <li>起きる</li>
  <li>顔を洗う</li>
  <li>朝ごはん</li>
</ol>

🟡 ⑦ 強調：`<strong>`, `<em>`

<strong>重要な言葉</strong> は太字になります。  
<em>注目</em> は斜体になります。

➡ 強調や注目させたい言葉に使えます。

💻 まとめて練習！

<!DOCTYPE html>
<html>
<head>
  <title>HTMLタグ練習</title>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>これは段落です。<br>改行もできます。</p>

  <h2>好きな果物</h2>
  <ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>ぶどう</li>
  </ul>

  <h2>リンクと画像</h2>
  <a href="https://example.com">Exampleページへ</a><br>
  <img src="cat.jpg" alt="ネコ">

  <p><strong>重要！</strong> このページは練習用です。</p>
</body>
</html>

🧪 演習時間（5分程度）

上記を打ち込んで、sample.html として保存 → ブラウザで開いて表示確認！
練習として、<h3>や<ol>も使って自分のプロフィールページ風にしてもOK！

次は「3. CSSの基本とデザイン体験（25分）」に進みましょうか？
　色やフォント、背景を変えて「見た目がガラッと変わる体験」をしてもらうパートです！

🟦 3. CSSの基本とデザイン体験（25分）

🎯 目的

CSSが「見た目の装飾」を担当していることを理解する
実際に色・文字・余白・枠線を変えることで楽しくデザイン体験
セレクタとプロパティの基本的な使い方を覚える

🔷 CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作られた「骨組み」に色や形、配置などの装飾を加える言語です。

📚 CSSの基本構文

セレクタ {
  プロパティ: 値;
}

例：

h1 {
  color: blue;
  font-size: 24px;
}

→ h1 タグの文字色を青、文字サイズを24ピクセルにする、という意味

✅ CSSの3つの書き方

方法	特徴	書く場所
インラインCSS	1つのタグにだけ	`<p style="color:red;">`
内部CSS	1つのHTMLファイル内でまとめて管理	`<style>～</style>`
外部CSS	専用CSSファイルを作る	`style.css`などに記述

この講座では内部CSS（<style>タグ）を使います！

🧪 CSS体験スタート！

📁 HTML＋CSSのセット例

<!DOCTYPE html>
<html>
<head>
  <title>CSSデザイン体験</title>
  <style>
    body {
      background-color: #f0f8ff;
    }

    h1 {
      color: darkblue;
      font-size: 32px;
      border-bottom: 2px solid navy;
      padding-bottom: 10px;
    }

    p {
      color: #333333;
      font-size: 16px;
      line-height: 1.5;
    }

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>CSSでデザインしてみよう！</h1>
  <p>これは普通の段落です。</p>
  <p class="highlight">この段落は目立たせています。</p>
</body>
</html>

🧩 説明ポイント

用語	説明
`color`	文字の色
`background-color`	背景色
`font-size`	文字サイズ
`padding`	内側の余白
`border`	枠線
`line-height`	行間
`.highlight`	クラス指定。複数の場所に同じ装飾ができる！

🎨 ちょい足しデザイン練習

💡ボタン風のデザイン例

<style>
.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 8px;
}
</style>

<a href="#" class="button">クリック！</a>

➡ <a> を見た目ボタンに変身✨

🎯 練習課題（5分）

色を赤、背景をピンクに変えてみる
font-size を自分好みにしてみる
枠線の色を変えてみる

🧠 まとめ

用語	役割
セレクタ	どのHTML要素を装飾するか
プロパティ	どんな装飾をするか
値	装飾の具体的な内容（色・サイズなど）

次のセクションでは、「4. フォームを作ろう（20分）」で
HTML＋CSSを使ってユーザーからの情報入力ページを作成します！その前に・・・

🟩 外部CSSで書く場合の例

💡外部CSSの特徴

HTMLとCSSを別ファイルに分けて管理
大きなWebサイトでは基本スタイルの使いまわしがしやすい
.css ファイルにスタイルだけを書く

✅ 1. HTMLファイル（例：`index.html`）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSSデザイン体験</title>
  <!-- 外部CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>CSSでデザインしてみよう！</h1>
  <p>これは普通の段落です。</p>
  <p class="highlight">この段落は目立たせています。</p>
</body>
</html>

✅ 2. 外部CSSファイル（例：`style.css`）

body {
  background-color: #f0f8ff;
}

h1 {
  color: darkblue;
  font-size: 32px;
  border-bottom: 2px solid navy;
  padding-bottom: 10px;
}

p {
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

📁 ファイル構成（例）

bashコピーする編集する/css-practice/
├── index.html
└── style.css

🔍 表示結果は「内部CSS」とまったく同じですが…

複数のHTMLページで同じ style.css を使いまわせる
デザインの修正も CSSファイルだけ直せば反映される
コーディングがスッキリして読みやすい

✅ ワンポイントアドバイス

方法	おすすめの用途
インラインCSS	ちょっとだけ試したいとき
内部CSS	学習中や小規模な1ページで完結するサイト
外部CSS	実務では基本こちら！大規模サイトでも◎

🟦 4. フォームを作ろう（20分）

🎯 目的

ユーザーからの入力を受け取る「フォーム」の基本構造を理解する
よく使うフォーム部品（テキスト、ラジオボタン、チェックボックスなど）を実際に使ってみる
CSSで見た目を整える体験をする

🔷 フォームとは？

ユーザーから情報を受け取る仕組みです。
例えば：

名前や住所を入力
性別を選択
お問い合わせ内容の送信　など

フォームの土台は <form> タグで囲みます。

✅ 基本構造

<form action="送信先URL" method="GETまたはPOST">
  フォーム部品をここに入れる
</form>

今回は送信処理は行わず、見た目や動きを学ぶことに集中します！

🧪 フォーム部品の基本

🔸 テキスト入力欄

<label for="name">名前：</label>
<input type="text" id="name" name="name">

🔸 ラジオボタン（1つ選ぶ）

<label>性別：</label>
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

🔸 チェックボックス（複数選べる）

<label>趣味：</label>
<input type="checkbox" name="hobby" value="music"> 音楽
<input type="checkbox" name="hobby" value="sports"> スポーツ
<input type="checkbox" name="hobby" value="movie"> 映画

🔸 プルダウンメニュー（select）

<label for="pref">都道府県：</label>
<select id="pref" name="pref">
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
  <option value="hokkaido">北海道</option>
</select>

🔸 テキストエリア（複数行）

<label for="message">ご意見：</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>

🔸 送信ボタン

<input type="submit" value="送信">

📄 フォーム全体サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>フォームの練習</title>
  <style>
    body {
      font-family: sans-serif;
    }
    label {
      display: inline-block;
      width: 80px;
      margin-bottom: 8px;
    }
    input, select, textarea {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>お問い合わせフォーム</h1>
  <form>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name"><br>

    <label>性別：</label>
    <input type="radio" name="gender" value="male"> 男性
    <input type="radio" name="gender" value="female"> 女性<br>

    <label>趣味：</label>
    <input type="checkbox" name="hobby" value="music"> 音楽
    <input type="checkbox" name="hobby" value="sports"> スポーツ<br>

    <label for="pref">都道府県：</label>
    <select id="pref" name="pref">
      <option value="tokyo">東京</option>
      <option value="osaka">大阪</option>
      <option value="hokkaido">北海道</option>
    </select><br>

    <label for="message">ご意見：</label><br>
    <textarea id="message" name="message" rows="4" cols="40"></textarea><br>

    <input type="submit" value="送信">
  </form>
</body>
</html>

🧠 補足

タグ	意味・使い方
`<form>`	入力全体を囲む
`name="..."`	送信時の項目名（今回は実際に送信しないので見た目重視）
`id` と `for`	ラベルとフォーム部品の対応関係を結ぶ

🎯 演習アイデア（5分）

以下を試してみると◎

<input type="email"> を使ってみる（HTML5）
required 属性で「必須」にしてみる
CSSで input[type="text"] に枠線や背景色を追加して見た目変更

🟦 5. まとめと質疑応答（10分）

🎯 目的

今日学んだことを整理・定着する
「Webページがどう作られているか」の全体像をつかんでもらう
今後の学びに自信と興味を持ってもらう

✅ 今日学んだことのまとめ

パート	キーワード	内容
1. HTMLとは？	構造・タグ	ページの「骨組み」をつくる。`<h1>`や`<p>`など
2. HTML基本タグ	見出し・段落・リンク	よく使うタグで「情報を配置」する
3. CSS基本	装飾・色・余白	見た目を変える。セレクタとプロパティ
4. フォーム	入力欄・ボタン	ユーザーからの情報を受け取るUIをつくる

🎯 理解チェック

h1タグって何のために使うんだっけ？
CSSで文字の色を変えるには？
ラジオボタンとチェックボックスの違いって？

→ ペアで聞き合い＆答え合い形式にしても楽しいです。

📌 よくある質問への補足

質問	回答
スマホでどう見えるかは？	「レスポンシブデザイン」は次のステップで学びます
HTMLだけで動きのあるページは作れますか？	基本は静的。動きをつけるにはJavaScript
デザインを極めるには？	CSSのプロパティをもっと学ぶ＋Figmaなども便利
無料で学べるサイトは？	Progate、ドットインストール、MDN、CodePen など

📚 今後の学び方アドバイス

方法	おすすめサイト・内容
実際に打ってみる	CodePen、VSCodeなどで実験
無料学習サイト	Progate、ドットインストール、MDN
次のステップ	JavaScript → レイアウト（Flexbox・Grid）→ フォーム連携（PHPやJS）

🎁 おまけ：やってみよう「課題アイデア」

自分のプロフィールページを作ってみよう
好きなアニメやゲームの紹介ページを作ってみよう
練習用フォームで「お問い合わせごっこ」

🙋‍♀️ 質疑応答タイム（残り時間）

わからなかったこと、もう一度聞きたいこと
「こういうページ作りたいけどできる？」などの相談も歓迎！

📝 受講者への一言

HTMLとCSSは、たとえるなら「ブロック遊び」や「折り紙」に似ています。
少しずつ組み立てることで、自分だけの作品が形になっていきます。
今日の内容をベースに、楽しく作る気持ちを忘れずに取り組んでみてください！

🔷HTML・CSS基礎コース（90分）カリキュラム

🕒 時間配分イメージ

🔸カリキュラム

1. HTMLとは？（10分）

2. HTMLの基本タグ（25分）

3. CSSの基本（25分）

4. フォームを作ろう（20分）

5. まとめと質疑応答（10分）

✅ 備考・補足資料の提案

🟦 1. HTMLとは？（10分）

🎯 目的

✅ はじめに：HTMLってなに？

🖼️ イメージ：HTMLは“ページの骨組み”

🌐 ブラウザとサーバーの関係（超ざっくり）

🏷️ タグの概念（超基本）

✍️ 実例：HTMLの最小ページ

🔍 これはどういう意味？

🧪 ワンポイント演習（任意）

🟦 2. HTMLの基本タグ（25分）

🎯 目的

🧱 HTMLの基本構造をおさらい

📚 よく使うHTMLタグと例

🟡 ① 見出しタグ：<h1> ～ <h6>

🟡 ② 段落：<p>

🟡 ③ 改行：<br>

🟡 ④ リンク：<a href="">

🟡 ⑤ 画像：<img src="..." alt="...">

🟡 ⑥ リスト：順序あり/なし

🔸 順序なしリスト（●のリスト）

🔸 順序ありリスト（1. 2. 3.）

🟡 ⑦ 強調：<strong>, <em>

💻 まとめて練習！

🧪 演習時間（5分程度）

🟦 3. CSSの基本とデザイン体験（25分）

🎯 目的

🔷 CSSとは？

📚 CSSの基本構文

例：

✅ CSSの3つの書き方

🧪 CSS体験スタート！

📁 HTML＋CSSのセット例

🧩 説明ポイント

🎨 ちょい足しデザイン練習

💡ボタン風のデザイン例

🎯 練習課題（5分）

🧠 まとめ

🟩 外部CSSで書く場合の例

💡外部CSSの特徴

✅ 1. HTMLファイル（例：index.html）

✅ 2. 外部CSSファイル（例：style.css）

📁 ファイル構成（例）

🔍 表示結果は「内部CSS」とまったく同じですが…

✅ ワンポイントアドバイス

🟦 4. フォームを作ろう（20分）

🎯 目的

🔷 フォームとは？

✅ 基本構造

🧪 フォーム部品の基本

🔸 テキスト入力欄

🔸 ラジオボタン（1つ選ぶ）

🔸 チェックボックス（複数選べる）

🔸 プルダウンメニュー（select）

🔸 テキストエリア（複数行）

🔸 送信ボタン

📄 フォーム全体サンプル

🧠 補足

🎯 演習アイデア（5分）

🟦 5. まとめと質疑応答（10分）

🎯 目的

✅ 今日学んだことのまとめ

🎯 理解チェック

📌 よくある質問への補足

📚 今後の学び方アドバイス

🎁 おまけ：やってみよう「課題アイデア」

🙋‍♀️ 質疑応答タイム（残り時間）

📝 受講者への一言

🟡 ① 見出しタグ：`<h1>` ～ `<h6>`

🟡 ② 段落：`<p>`

🟡 ③ 改行：`<br>`

🟡 ④ リンク：`<a href="">`

🟡 ⑤ 画像：`<img src="..." alt="...">`

🟡 ⑦ 強調：`<strong>`, `<em>`

✅ 1. HTMLファイル（例：`index.html`）

✅ 2. 外部CSSファイル（例：`style.css`）