HTML・CSS・JavaScriptだけでつくるWeb開発体験ワークショップ（フロントエンド編）
目的：
ライブラリもフレームワークも使わず、純粋なHTML・CSS・JavaScriptだけで
「今風のWebページ」を体験しながら仕組みを理解する勉強会です。
開発者ツールやエディタで改変して、何がどう変化するか試してみましょう。
生成AIに解説させ、作成させ、自分の理解を深めましょう。
今回はフロントエンド、画面編です。
デモ
ソース
概要
- 対象者： Web開発初心者（HTMLタグやCSSを少し見たことある程度でもOK）
- 時間： 約50分（デモ＋体験＋質疑）
- 形式： ワークショップ（参加者も各自ソース改変。生成AI活躍も推奨）
- テーマ： 「シンプルでも動く」「同じプロンプトでもコードの違いが結果に出る楽しさ」
進行
| ステップ | 内容 | 学びのポイント |
|---|---|---|
| Step 1 — HTML Only | HTMLタグだけで構造を作る（10分） | 見出し・リスト・フォーム・折りたたみ要素など「HTMLネイティブ機能」の理解 |
| Step 2 — CSS Switch | モダン／レトロなデザインをCSSだけで切替（15分） | 「同じHTMLでも見た目が激変する」ことを体感 |
| Step 3 — Dynamic JS | ハンバーガーメニューや色変えなどの動的処理（10分） | JavaScriptが「状態を変える」仕組みを体験 |
| Step 4 — External API | Open-Meteoの天気APIでリアルデータ表示（10分） | fetch() による外部連携とライセンス表記の理解 |
コンセプト
-
HTML→CSS→JavaScriptを順に適用
- Step1～4で徐々に装飾・動作・外部連携を追加。
- “静から動へ”という進化を実感できる流れ。
-
フレームワークなしでも十分できることを体験
- VueやReactの前に、素のDOM操作を理解。
- 便利ツールを「使う前に仕組みを知る」ことを目的とする。
-
生成AI利用では違いが出るのも醍醐味
- 同じプロンプトでも、受講者ごとに多分結構結果が異なるはず。
- それこそがWeb制作の“表現の自由度”であると実感する仕様とする。
-
言語習得や文法講座ではなく、開発者ツールと生成AIを駆使した改変を楽しむ
- 詳細が気になる場合は生成AIへ確認など、自習してみてください。
- 何か動くものを作る、解析する、改変する、という手法に触れることがゴールです。
実行環境
- ブラウザのみ（Chrome / Edge / Firefox 何でも良いが最新推奨。ブラウザ差異も楽しみの一つ）
- ファイル構成：
workshop/
├─ index.html ← メニュー（4ステップの入口）
├─ step1_html_only/
│ └─ index.html
├─ step2_css_switch/
│ ├─ index.html
│ ├─ modern.css
│ └─ retro.css
├─ step3_dynamic/
│ ├─ index.html
│ ├─ style.css （= modern.css ベース）
│ └─ script.js
└─ step4_external/
├─ index.html
├─ style.css （= modern.css ベース）
└─ script.js （天気APIの fetch を追加）
- 各ステップは独立して動作。順番に体験しても途中からでもOK。
体験の流れ
- メニューを開いたら、開発者ツールを開く
- 各ステップのページで、画面の要素を確認する
- 要素の一部を改変する。改変できてしまうことを確認する
- step1ではhtmlで構成を組むことを確認する
- step2ではcss切り替えて見た目が激変することを確認する
→変更できちゃうことを認識する - step3ではDOMに触れる
- step4ではfetchに触れる
- 各自で「html、css、JavaScriptだけでおしゃれなカレンダーアプリ作って」と生成AIへ依頼。違いを楽しむ
利用している外部サービス
-
Open-Meteo API
天気データは Open-Meteo 提供。
ライセンスは CC BY 4.0。
データは非商用利用の範囲で使用。利用規約と帰属表記を明示。
学べること
- HTMLだけでもできるフォーム検証・折りたたみ・メディア要素
- CSSの変数・グラデーション・ダークテーマ設計
- JavaScriptによる状態制御（開閉・テーマ切替・モーダル）
- fetch() によるJSON取得とDOMへの反映
- セキュリティ上の注意点（noopener／CORS／APIライセンス）
- 画面側には役割と限界があるよ、サーバ側ですべきことがあるよ、というのが、バックエンド編への引きとなる。
付録 DOMツリーのイメージ
「メニューのページ全体のうちピックアップ、最小構造＋カード1枚」を合わせて可視化。
HTMLドキュメントの基本的な親子構造（ルート〜body〜main） を理解する例。
見方のポイント
| 要素 | 意味 |
|---|---|
| Document | ブラウザが読み込む1ページ全体（最上位） |
| !DOCTYPE html | HTML5宣言（モードを指定） |
| html | すべての要素を包むルート |
| head | タイトル・CSS・設定情報（画面には非表示） |
| body | 画面に表示される内容全体 |
| main.container | ページの主な領域（中身の入れ物） |
| section.cards | 複数カードをまとめたブロック |
| article.card | カード1枚分（見出し・本文・ボタン） |
| h2, p, div.actions, a | カードの中の部品たち |
補足メモ
- この「ツリー構造」こそが DOM（Document Object Model） の基本。
- 開発者ツールの「Elements」タブで
<body>を展開すると、
まさにこのような入れ子構造（親子関係） として見える。 -
document.querySelector("main .card h2")のように、
階層をたどる指定がDOM操作の基本構文になります。 - DOMそもそもの歴史的経緯などの座学は別途。
イメージ：
根（document）→ 幹（html）→ 枝（body / main）→ 葉（article / h2 / a）
すべてのWebページは、このツリーの上に成り立っています。