このワークショップでは、HTML、CSS、JavaScriptを使って学習タスク管理アプリを段階的に構築します。 逆算学習法を採用し、完成形を先に見てから段階的に実装することで、効率的な学習を実現します。
6_06_再挑戦/
├── 完成版/ # 🏆 最終成果物（デモ用）
│ ├── index.html
│ ├── style.css
│ └── script.js
├── 初心者向け/ # 👶 手取り足取りガイド
│ ├── テンプレート/
│ │ ├── phase1_html_template.html
│ │ ├── phase2_css_template.css
│ │ └── phase3_javascript_template.js
│ ├── ヒント/
│ │ ├── phase1_html_hints.md
│ │ ├── phase2_css_hints.md
│ │ └── phase3_javascript_hints.md
│ └── 説明資料/
│ └── ワークショップ説明資料案2.md
├── 中級者向け/ # 🎯 穴埋め形式
│ ├── 穴埋めテンプレート/
│ │ ├── index_fillblank.html
│ │ ├── style_fillblank.css
│ │ └── script_fillblank.js
│ ├── 解答例/
│ │ ├── index_answer.html
│ │ ├── style_answer.css
│ │ └── script_answer.js
│ └── 説明資料/
│ └── ワークショップ説明資料案3.md
├── 上級者向け/ # 🚀 最小限のガイド
│ ├── 最小テンプレート/
│ │ ├── index_minimal.html
│ │ ├── style_minimal.css
│ │ └── script_minimal.js
│ └── 説明資料/
│ └── ワークショップ説明資料案1.md
└── 講師用資料/ # 📚 指導者向け
├── ワークショップ企画_nitac_web班.md
└── ユーザー体験シミュレーション.md
cd 完成版
# ブラウザでindex.htmlを開く
初心者向け/テンプレート/ から開始ヒント/ フォルダを参照中級者向け/穴埋めテンプレート/ から開始解答例/ と比較上級者向け/最小テンプレート/ から開始<header>, <section>, <article>の適切な使用<input>, <label>の関連付けtransitionとtransformの活用querySelector, getElementByIdの使い分け| 問題 | 原因 | 解決法 |
|---|---|---|
| レイアウトが崩れる | タグの閉じ忘れ | HTMLバリデーターで確認 |
| CSSが適用されない | class名の不一致 | デベロッパーツールで確認 |
| 問題 | 原因 | 解決法 |
|---|---|---|
| アニメーションが動かない | ベンダープレフィックス不足 | autoprefixerの使用 |
| レスポンシブが効かない | viewport設定忘れ | metaタグの確認 |
| 問題 | 原因 | 解決法 |
|---|---|---|
| 要素が取得できない | DOMContentLoaded前の実行 | イベントリスナーで包む |
| イベントが発火しない | セレクタの間違い | コンソールでデバッグ |
基本機能完成後の発展的な課題：
問題を発見した場合は、以下の情報と共にお知らせください：
このワークショップ教材は教育目的で作成されています。
NITAC（長岡工業高等専門学校）WEB班の学習活動の一環として制作されました。
Happy Coding! 🎉
Last updated: 2024年12月