授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
CSSを正しく適用するためのタグを記述出来る。
|
HTMLの復習
タグの使い方とCSSを適用するためのタグを学習する。
|
| 【理解度確認】課題（HTMLタグ） |
| 2 |
CSSとは何か、基本ルールを説明出来る。
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レイアウトの基本
ボックスモデルについて学習し、余白の調整、ボックスサイズの計算も学習する。
ブラウザの開発環境を学習する。 |
| 【理解度確認】課題（CSSの記述） |
| 11 |
段組みのレイアウトをCSSで記述することが出来る |
段組みのレイアウト
flexboxを使ったレイアウトを学習する。 |
| 【理解度確認】課題（CSSの記述） |
| 12 |
自由に要素を配置するレイアウトをCSSで記述することが出来る。 |
自由に要素を配置するレイアウト
floatとposisionを使ったレイアウトを学習する |
| 【理解度確認】課題（CSSの記述） |
| 13 |
gridを使ったレイアウトをCSSで記述することが出来る。
|
グリッドレイアウト
gridを使ったレイアウトを学習する。 |
| 【理解度確認】課題（CSS記述） |
| 14 |
CSSを使ったWebサイトを作成出来る。 |
Webサイト制作の実践
テンプレートを参考にしてお店のWebページを作成する。
|
| 【理解度確認】課題（Webページ作成） |
| 15 |
CSSを使ったWebサイトを作成出来る。 |
Webサイト制作の実践
テンプレートを参考にしてお店のWebページを作成する。 |
| 【理解度確認】課題（Webページ作成） |
