授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
1. WEBサイトが何でできているかを理解する。
3. WEBサイトのAI生成を学習する。
2. 課題を提出出来る。 |
WEB業界、WEBの職種、授業との関係を理解する。
WEBサイトとは何でできているかを理解し、作成する。
自己紹介をする文章を作成する。
課題の提出の仕方を理解する。 |
| 【理解度確認】提出課題 |
| 2 |
1.Cursorの導入を学習する。
2.WEBサーバーへWEBサイトをアップロード出来る。 |
Cursorを起動し、名称を理解する。
空のHTMLファイルを作成する。
ファイルのアップロードを実践する。 |
| 【理解度確認】提出課題 |
| 3 |
1.基本的なHTMLタグを理解する
2.HTML5の基本文法（要素、開始タグ、終了タグ）を学習し、課題を提出出来る。
3.文章構造の種類を学習する |
基本文法を直打ちで実践し、開始タグ、終了タグを学習する。
HTMLタグのh1,p,br, strong, ul,li,ol,aを理解する。
HTMLとは何かを学習する。
文章構造の見出し、段落、箇条書きを理解する |
| 【理解度確認】提出課題 |
| 4 |
1.HTMLの画像を表示出来る。
2.パスについて学ぶ。 |
改行、強調、画像の表示を学習する。
横幅、高さ、Altを学習する
パスについて学習する |
| 【理解度確認】提出課題 |
| 5 |
1.HTMLで表を作成出来る。
2.リッチコンテンツにふれる。 |
表を表示する。
応用のHTMLタグ、iframe、Video、audioなどを紹介 |
| 【理解度確認】提出課題 |
| 6 |
1.CSSファイルを作る。
2.CSSの基本的なプロパティを理解し確認出来る。
3.CSSの基本文法（セレクタ、プロパティ、値、単位）で作成が出来る。 |
CSSとは何かとその用語を学習する。
CSS言語の基本文法について理解する。
文字の装飾、color, font-size, letter-spacing を実践する。 |
| 【理解度確認】提出課題 |
| 7 |
1.CSSの基本文法の用語を理解する。
2.HTMLの基本文法（クラス、属性）を作成出来る。 |
HTMLの属性とクラスを学習し、CSSを使い装飾を加える。
CSSを使い font-weight,opacity, line-height,などを実践する。 |
| 【理解度確認】提出課題 |
| 8 |
1 divとspan の使い方について理解する。
2.擬似クラスの概念を理解し確認出来る。 |
レイアウトに関わるプロパティのmargin, padding, width, height, box-shadow, border,を学習する。
基本的な擬似クラスのE:visited, E:hover, E:active を学習する。 |
| 【理解度確認】提出課題 |
| 9 |
1.ボックスモデルを学習する。
2.CSSのdisplayを使用する。
3.CSSの基本文法（子孫セレクタ）を理解し確認出来る。 |
ボックス要素を学習する。
レイアウトに関わるCSS、display,flexに触れる。 |
| 【理解度確認】提出課題 |
| 10 |
1.CSSのPosition関連について作成ができる。
2.応用のCSSの紹介 |
positionを使い方を学習する。
応用のCSSプロパティ、transition などを紹介 |
| 【理解度確認】提出課題 |
| 11 |
1. テンプレートファイルを用いてサイトを構築することが出来る。
2. WEBディレクターの業務内容について知る。
3. WEBデザイナーの業務内容について知る。
4. サイトコンテンツを考える。 |
テンプレートファイルを構築して新しいHTMLをアップロードする。 |
| 【理解度確認】提出課題 |
| 12 |
1.レイアウトに使われているHTMLを理解し説明出来る。 |
WEBサイトのレイアウトについて学ぶ。 |
| 【理解度確認】提出課題 |
| 13 |
1.コンポーネントの種類を理解し説明出来る。 |
WEBサイトのコンポーネントについて学ぶ。 |
| 【理解度確認】提出課題 |
| 14 |
1.生成AIの使い方を理解し説明出来る。 |
AIを使い更新の仕方を学ぶ。 |
| 【理解度確認】提出課題 |
| 15 |
1.テンプレートのHTMLを完成させることが出来る。 |
テンプレートを完成させ、公開されたページを確認できる。 |
| 【理解度確認】提出課題 |
