授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
・HTMLの復習をする
・CSSの役割について説明できる |
・授業ガイダンス
・HTMLの復習
・CSSの役割 |
| 【理解度確認】演習問題の実施と動作確認 |
| 2 |
基本的な装飾が出来る。 |
・教科書サンプルの説明とその実装。 |
| 【理解度確認】演習問題の実施と動作確認 |
| 3 |
ボックスモデルを意識したレイアウトを設定できる |
・ボックスモデル
padding,border,margin |
| 【理解度確認】演習問題の実施と動作確認 |
| 4 |
リスト、表のスタイリングができる |
・リスト、表のスタイリング |
| 【理解度確認】演習問題の実施と動作確認 |
| 5 |
CSSのFlexboxを使った折り返しや水平垂直位置のレイアウトができる |
・CSSによるページ全体のレイアウト
Flexboxによる折り返しの設定 |
| 【理解度確認】演習問題の実施と動作確認 |
| 6 |
フォームのスタイルを設定できる |
・CSSによるフォームのスタイリング |
| 【理解度確認】演習問題の実施と動作確認 |
| 7 |
JavaScriptの特徴について説明できる
変数・制御構造を使ったプログラムを記述できる |
・JavaScriptの基本文法１
JavaScriptの特徴
記述方法、変数の利用、制御構造 |
| 【理解度確認】演習問題の実施と動作確認 |
| 8 |
JavaScriptで配列、関数を使った処理を記述できる |
・JavaScriptの基本文法２
配列、関数 |
| 【理解度確認】演習問題の実施と動作確認 |
| 9 |
DOMを使いHTMLの要素を操作することができる |
・JavaScriptの基本文法３
DOM |
| 【理解度確認】演習問題の実施と動作確認 |
| 10 |
ユーザによる操作をきっかけ（イベント）としたプログラムを書ける |
・JavaScriptの基本文法４
イベント |
| 【理解度確認】演習問題の実施と動作確認 |
| 11 |
JavaScriptによりCSSを操作しWebサイトのデザインを変えることが出来る |
・JavaScriptによるCSSの操作 |
| 【理解度確認】演習問題の実施と動作確認 |
| 12 |
jQueryの基本文法を習得する |
・jQueryの概要
・jQueryの使い方 |
| 【理解度確認】演習問題の実施と動作確認 |
| 13 |
jQueryのWebサイトへの適用方法を理解する |
・jQueryのWebサイトの適用
スライドショー、ドロップダウンメニュー |
| 【理解度確認】演習問題の実施と動作確認 |
| 14 |
WebサイトをCSSやJavaScriptによって装飾することができる |
復習と学習内容確認 |
| 【理解度確認】演習問題の実施と動作確認 |
| 15 |
Webページを作成する。 |
・理解度確認 |
| 【理解度確認】テスト |
