授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
HTMLの基本書式のルールを理解し適切に記述できる。ごく簡単なHTMLを使ったページを作成出来る。 |
・Web制作の基本概念（クライアント・サーバの仕組み、ブラウザの役割）
・HTMLの役割、基本構造（html, head, body）
・Visual Studio codeの基本操作
|
| 【理解度確認】課題: 自己紹介ページの作成 |
| 2 |
良く使われるHTML要素の意味とその役割を説明出来る。それらの要素を使い簡単なページを作成出来る。 |
Webサイトで良く使われるHTMLの頻出要素について学ぶ。
・見出し、段落、リスト、画像、リンクなど主要タグの解説
・適切なマークアップ、文章構造
・【AI活用】簡単なコード例をAIツールで生成・確認する方法 |
| 【理解度確認】課題: 自己紹介ページの作成 |
| 3 |
複数ページを使い相互にリンクを設定できる。相対パス、絶対パスの違いを説明出来る。 |
・相対パスと絶対パスの違い
・ナビゲーションの作り方と内部リンクの設定
・フォルダ構造
・【AI活用】リンク構造の最適化アドバイスをAIに問い合わせる
|
| 【理解度確認】課題:複数ページで構成される小規模サイトを作成し、ページ間リンクを実装 |
| 4 |
セクショニングコンテンツに属する要素の役割とアウトラインの仕組みを説明出来る。それらの要素を適切に使い文章構造に沿ったマークアップが出来る。 |
・HTML5のセマンティック要素（header, nav, main, article, section, footerなど）の紹介
・tableの作り方
・アクセシビリティの基本とSEO対策
|
| 【理解度確認】課題、確認テスト |
| 5 |
CSSを用いて文字の大きさや色、背景などを変えることが出来る。
idとclassを適切に使い分けることが出来る
|
・CSSの導入、基本書式、セレクタの使い方
・文字色、背景、フォント、レイアウトの基本的なプロパティ
・【AI活用】AIを活用したスタイルシートの書き方 |
| 【理解度確認】課題 |
| 6 |
CSSの優先度を理解し、基本的なセレクタを使うことが出来る。
簡単なレイアウトを組むことが出来る。
|
・ボックスモデル（margin, padding, border）の詳細
・レイアウトの基礎概念と基本プロパティ
・ボックスモデルの視覚化ツールの利用方法 |
| 【理解度確認】課題 |
| 7 |
CSS Gridを使い簡単なレイアウトを組む事が出来る。 |
・Gridレイアウトの基本概念、グリッドライン、エリア指定などの解説
・複雑なレイアウトの作成手法
・【AI活用】Gridのレイアウト例やプロパティの最適な組み合わせをAIで確認。 |
| 【理解度確認】課題 |
| 8 |
Flexboxを使い、簡単なレイアウトを組む事が出来る。 |
・Flexboxの基本概念、プロパティ（justify-content, align-itemsなど）の解説
・実践的なレイアウト（ナビゲーションバーやカードレイアウトなど）の構築
・【AI活用】AIを活用したレイアウト作成 |
| 【理解度確認】課題 |
| 9 |
float、positionプロパティを使ったレイアウトを組む事が出来る。 |
・float、positionプロパティの特徴と利用方法について学ぶ。
・float、positionそれぞれの使い所と、レイアウトの組み方を学ぶ
・【AI活用】動きを加えるためのコードスニペット生成をAIで実践
|
| 【理解度確認】課題 |
| 10 |
擬似クラス・擬似要素の違いを理解し、それらを用いてCSSを組むことが出来る。簡単なエフェクトやアニメーションを実装できる |
・疑似クラス・疑似要素の利用法（:hover, :focus など）
・基本的なトランジションやアニメーションの実装
・【AI活用】動きを加えるためのコードスニペット生成をAIで実践
|
| 【理解度確認】課題 |
| 11 |
RWDの技術を理解し、基本的なRWDのサイトを作成する事ができる。 |
・メディアクエリの使い方、ブレイクポイントの設定
・スマホ・タブレット対応のレイアウト設計
・【AI活用】レスポンシブデザインのコーディングをAIを活用しつつ実践 |
| 【理解度確認】課題 |
| 12 |
Gitによるバージョン管理方法を理解し、GitHubとの連携および簡易的なデプロイまで出来る。 |
・Gitの基本的な仕組みと使い方
・Gitによるバージョン管理、VS Code上での設定と活用
・ローカル環境からGitHubと連携しデプロイまでを学ぶ |
| 【理解度確認】課題 |
| 13 |
FiigmaやPhotoshopなどでデザインを作成し、それを適切にコーディングすることが出来る。 |
・Webサイトの企画立案、情報整理、ワイヤーフレーム作成の方法
・【AI活用】デザインのアイデア出しやフィードバックの受け方の解説
|
| 【理解度確認】課題 |
| 14 |
企画から設計、デザインとワークフローを理解した上で適切にWebサイトを制作出来る。 |
・企画に基づいたサイト制作（HTML/CSSでのコーディング）
・AIツールを活用したコードの最適化、エラー修正の実践
・【個別指導】講師とのフィードバックを元に、プロジェクトをブラッシュアップ |
| 【理解度確認】課題 |
| 15 |
企画の内容、作成した作品について的確にプレゼン出来る。 |
・作品プレセンテーション （制作過程、工夫点、AI活用の事例などの共有）
・ピアレビューと講評、今後の学習へのフィードバック
|
| 【理解度確認】 プレゼンテーションおよび、作品データの提出 |
