授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
構造化タグを正しく使ったWebページを作成することが出来る。
|
HTMLの復習と構造化タグの使い方学習する。
|
| 【理解度確認】課題（HTMLタグ） |
| 2 |
CSSとは何か、基本ルールを説明出来る。
CSSチェッカーを利用し誤りを修正出来る。
|
CSSの概要、CSSの基本ルール学習する。CSSの文法チェッカーの使い方を学習する。
|
| 【理解度確認】課題（CSS） |
| 3 |
セレクタの種類と書き方を説出来る。
|
スタイルシートの書き方（セレクタの種類、よく使うセレクタ、特殊なセレクタ）を学習する。
|
| 【理解度確認】課題（CSS） |
| 4 |
文字、見出しなどに関するCSSを記述することが出来る。
|
スタイルシートの書き方（文字サイズ、文字の単位、文字の行間、書体、文字色、見出し装飾など）を学習する。 |
| 【理解度確認】課題（CSS） |
| 5 |
段落、字下げ、両端揃えなどに関するCSSを記述することが出来る。 |
スタイルシートの書き方（段落、字下げ、両端揃えなど）を学習する。 |
| 【理解度確認】課題（CSS） |
| 6 |
テーブル装飾のCSSを記述することが出来る。 |
スタイルシートの書き方（テーブル装飾）を学習する。
応用課題として「時間割」の表を見やすくレイアウトする。 |
| 【理解度確認】課題（CSS） |
| 7 |
リスト装飾のCSSを記述することが出来る。 |
スタイルシートの書き方（リスト装飾）を学習する。 |
| 【理解度確認】課題（CSSの課題） |
| 8 |
フォーム装飾のCSSを記述することが出来る。 |
スタイルシートの書き方（フォーム）を学習する。
各種部品やマウスカーソル、不透明度の指定などを学習する。
応用課題として「アンケートフォーム」を見やすくレイアウトする。 |
| 【理解度確認】課題（CSS） |
| 9 |
ナビゲーションについて説明出来る。
色々な種類のナビゲーションを作成出来る。 |
ナビゲーションの役割、色々な種類のナビゲーションを学習する。 |
| 【理解度確認】課題（CSS） |
| 10 |
ボックスモデルとボックスの概念を説明出来る。
外部余白、内部余白、枠線のCSSを記述することが出来る。 |
ボックスモデルについて学習する。
スタイルシートの書き方（内部余白、外部余白、枠線）を学習する。 |
| 【理解度確認】課題（CSS） |
| 11 |
flexを使ったレイアウトをCSSで記述することが出来る |
スタイルシートの書き方（flexを使ったレイアウト）を学習する。 |
| 【理解度確認】課題（CSS） |
| 12 |
floatとposisionを使ったレイアウトをCSSで記述することが出来る。 |
スタイルシートの書き方（floatとposisionを使ったレイアウト）を学習する |
| 【理解度確認】課題（CSS） |
| 13 |
gridを使ったレイアウトをCSSで記述することが出来る。 |
スタイルシートの書き方（gridを使ったレイアウト）を学習する。 |
| 【理解度確認】課題（CSS） |
| 14 |
CSSを使ったWebサイトを作成出来る。 |
HTML5とCSS３を使ったお店のWebページを作成する。
テンプレートを参考にして作成する。 |
| 【理解度確認】課題（Webページ作成） |
| 15 |
CSSを使ったWebサイトを作成出来る。 |
HTML5とCSS３を使ったお店のWebページを作成する。
テンプレートを参考にして作成する。 |
| 【理解度確認】課題（Webページ作成） |
