授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
・Webページ表示の流れを図示できる（記憶・総合）
・Markdownで階層構造を持つ文章を書ける（適用）
・見出しレベルの誤用を識別できる（同定） |
・Webページが表示される流れ（HTML→DOM→CSS→描画）
・HTMLの役割、基本構造（html, head, body）
・Markdownによる文章構造化（見出し・リスト・引用）
・アウトライン設計の基本
・VS Codeの基本操作、Markdown Previewの導入 |
| 【理解度確認】課題：与えられた文章をMarkdownで階層化 |
| 2 |
Markdown要素と対応するHTMLタグを列挙できる（記憶）
HTMLからDOMツリーを図示できる（適用）
不適切なタグのネストを識別できる（同定） |
HTML基本構造（html, head, body）
MarkdownとHTMLタグの対応関係
DOMツリーの概念
Chrome DevToolsでDOM構造確認 |
| 【理解度確認】課題：壊れたHTMLを修正し正しい構造に直す。それのDOMツリーを図で書く |
| 3 |
用途に応じて適切なセマンティックタグを適用できる（適用）
セマンティック誤用を識別できる（同定）
スクリーンリーダー視点で問題点を説明できる（総合）
alt文を評価できる（評価） |
セマンティックタグ（header, nav, main, section, article, footer）
情報設計と意味論
スクリーンリーダーの読み上げ概念
代替テキストの作成と批評 |
| 【理解度確認】レポート：altの問題点分析（200〜300字）して提出 |
| 4 |
相対パスと絶対パスを適切に使い分けられる（適用）
パスエラーの原因を特定できる（評価）
情報構造に基づいたリンク構造を設計できる（総合）
リンク切れを識別できる（同定） |
相対パスと絶対パスの原理
aタグ、imgタグの属性
ディレクトリ構造設計
リンクエラーのデバッグ手法
サイト内ナビゲーション設計 |
| 【理解度確認】小テスト：HTMLのマークアップ、パス解決問題 |
| 5 |
HTMLのみで構造設計できる（適用）
ローカルリポジトリを作成し、Gitで初回コミットを実行できる（適用）
自分の文章構造設計意図を説明できる（総合） |
サイト全体の構造設計
文章をHTMLで構造化
Git初期導入(init, add, commit) |
| 【理解度確認】提出物：自己紹介サイト（HTMLのみ)、 Gitログ提出、自己評価コメント（構造の意図を説明） |
| 6 |
ボックスモデルを図示できる（記憶）
margin/padding変更後の表示を予測できる（適用）
DevToolsでボックス情報を確認できる（適用）
セレクタを適切に記述できる（適用） |
CSSの役割（構造と見た目の分離）
セレクタ基礎
ボックスモデル（content, padding, border, margin）
DevToolsでボックス確認 |
| 【理解度確認】小テスト：ボックスサイズ計算問題 課題：指定通り余白を再現 |
| 7 |
セレクタの詳細度を比較できる（同定）
セレクタによる上書き結果を予測できる（適用）
CSS競合の原因を特定できる（評価）
!important使用の妥当性を評価できる（評価）
DevToolsで適用されているCSSを確認できる（同定） |
カスケードの概念
セレクタ詳細度（specificity）
継承
!importantの影響
DevToolsでのスタイル確認 |
| 【理解度確認】小テスト：競合するスタイル上書き問題の解決 |
| 8 |
FlexboxとCSS Gridを用途別に分類できる（同定）
指定レイアウトを再現できる（適用）
レイアウト設計意図を説明できる（総合） |
Flexbox（一次元レイアウト）
CSS Grid（二次元レイアウト）
よく使うパターン（中央揃え、ナビゲーション、カード）
|
| 【理解度確認】実技小テスト: レイアウト作成 |
| 9 |
blockとinlineを分類できる（同定）
通常フローの挙動を説明できる（総合）
position適用後の配置を予測できる（適用）
display変更による変化を説明できる（総合） |
block要素とinline要素
通常フローの概念
displayプロパティ
position（static, relative, absolute, fixed） |
| 【理解度確認】課題：指定レイアウト再現 |
| 10 |
メディアクエリを書ける（適用）
モバイルファーストでCSSを設計できる（適用）
指定条件でレイアウト変化を予測できる（適用）
DevToolsで画面幅変更時の挙動を確認できる（適用）
ブレイクポイント設計理由を説明できる（総合） |
モバイルファースト設計
メディアクエリの構文
ブレイクポイント設計の原則
ビューポート設定
DevToolsでのデバイスエミュレーション |
| 【理解度確認】課題：既存ページを2段階レスポンシブ化 |
| 11 |
見出し階層を視覚的に設計できる（適用）
擬似クラス(:hoverや:last-child等)を実装できる（適用）
擬似要素(::afterや::before等)を実装できる(適用)
UI改善案を提案できる（評価）
視認性の観点からデザインを説明できる（総合） |
余白設計、タイポグラフィ階層設計の原則
疑似クラスの利用（:hover, :last-child等）
疑似要素の利用（::after, ::before等）
擬似要素の利用
コントラスト比の基礎
|
| 【理解度確認】課題：UIとコントラストの改善 |
| 12 |
AntigravityやGitHub Copilot ProによるAI提案生成と活用(適用)
AIのセキュリティリスクについて説明できる (適用)
AIを活用した制作フローができる(総合) |
Antigiravityの基本(AIの活用)
Gemini、Claudeの違い
Planモードの使い方
mdファイルとskillsの基本
セキュリティと危険性 |
| 【理解度確認】実技試験：AIを使った簡単なサイト制作 |
| 13 |
サイト目的を文章で定義できる（記憶・総合）
サイトマップを作成できる（総合）
コンテンツ構造をMarkdownで記述できる（適用）
情報設計意図を説明できる（総合）
AI助言の採否を判断できる（評価） |
総合制作（企画・情報設計）
・ターゲット定義
・コンテンツ / 情報設計
・サイトの全体構造 / UIの設計 |
| 【理解度確認】設計批評(ピアレビュー)→レポートにまとめて提出 |
| 14 |
DevToolsで問題箇所を特定できる（適用）
CSS競合原因を説明できる（総合）
AIを活用した修正が出来る（適用）
修正前後の差異を説明できる（総合） |
総合制作（実装・デバッグ）
・HTML/CSS統合
・DevToolsによるデバッグ
・レスポンシブ最終調整
・AIの活用 |
| 【理解度確認】実装批評(ピアレビュー)→レポートにまとめて提出 |
| 15 |
制作意図を論理的に説明できる（総合）
他者作品を客観的に批評できる（評価）
自己の改善点を言語化できる（総合） |
・作品プレセンテーション （企画内容、制作過程、工夫点）
・改善案の作成 |
| 【理解度確認】プレゼンテーション、最終振り返りレポート（800字） |
