授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
Webサイトの構成、HTMLの概要と基本構造を理解し、簡単なWebページを作成出来る。 |
HTTP、URL、HTMLの規格と書式、基本構造、DOCTYPE宣言、html要素、head要素、body要素。
head要素で使われる要素、見出し、p, br。
HTMLのコメント。 |
| 【理解度確認】実習課題 |
| 2 |
ハイパーリンクや画像表示など、URLを使ったWebページを作成出来る。
リストや表組みなど、情報を整理して表示するWebページを作成出来る。 |
絶対パス、相対パス、ルート相対パス。
img, a。
ul, ol, li, dl, dt, dd, table, tr, th, td。 |
| 【理解度確認】実習課題 |
| 3 |
入力フォームを使ってWebサーバーに情報を送信するWebページを作成出来る。 |
form, input, select, option, textarea, button。 |
| 【理解度確認】実習課題 |
| 4 |
適切な構造化を行ったHTMLを記述出来る。 |
header, main, footer, nav。
setion, article, aside。 |
| 【理解度確認】確認問題、実習課題 |
| 5 |
CSSの位置づけを理解し、基本的なCSSを使ったWebページを作成出来る。
文字のサイズや色を変更出来る。 |
CSSの書き方、HTMLファイルからの参照。
HTML要素の装飾
コメントの書式、単位・色の指定。 |
| 【理解度確認】実習課題 |
| 6 |
セレクタの指定方法を学び、特定の要素だけ装飾出来る。
背景の色を変えたり、画像を設定出来る。 |
IDとクラス。spanとdiv。詳細なセレクタ指定。
background。 |
| 【理解度確認】実習課題 |
| 7 |
幅や高さ、余白、枠線を意識したWebページを作成出来る。
コンテンツの位置を変更したり、横並びやグリッド状の整列が出来る。 |
width, height, padding, margin、border。
position, flex, grid レイアウト。 |
| 【理解度確認】実習課題 |
| 8 |
CSSを使ったアニメーションが作成出来る。
レスポンシブデザインについて説明し、実装出来る。 |
CSSアニメーション、transition, animation, @keyframes。
レスポンシブデザイン、@media。 |
| 【理解度確認】実習課題 |
| 9 |
JavaScriptの概要について説明し、簡単な動的サイトを制作出来る。 |
JavaScriptの書き方、HTMLファイルからの参照。
querySelector, addEventListener。
デバッグ領域の使い方。 |
| 【理解度確認】実習課題 |
| 10 |
JavaScriptの基本制御構文と配列を使って、動的なWebサイトを制作出来る。 |
if, for, forEach, map, filter。
配列と連想配列。 |
| 【理解度確認】実習課題 |
| 11 |
JavaScriptを使ってサーバからデータを取得し、画面に表示出来る。 |
サーバ連携手法、RESTful API
データ取得方法（fetch API：GET） |
| 【理解度確認】確認問題、実習課題 |
| 12 |
JavaScriptを使ってサーバにデータを送信出来る。 |
データ送信方法（fetch API：POST） |
| 【理解度確認】実習課題 |
| 13 |
JavaScriptを使って外部のWebAPIを実行し、その結果を表示出来る。 |
Google Cloud API |
| 【理解度確認】実習課題 |
| 14 |
これまでの学習内容を活かして、Webの予約登録フォームを作成出来る。 |
総合演習（サーバ連携） |
| 【理解度確認】実習課題 |
| 15 |
これまでの学習内容を活かして、期末試験の問題に回答出来る。 |
期末試験 |
| 【理解度確認】期末試験 |
