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