授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
Web技術の構成、HTMLの概要と基本構造を理解し、基本的なWebページを作成出来る。 |
HTTP、HTTPリクエストとレスポンス、URL、HTMLの規格と書式、基本構造、DOCTYPE宣言、html要素、head要素、body要素。 |
| 【理解度確認】確認問題、実習課題 |
| 2 |
head要素とbody要素内で利用される主な要素の役割を理解し、それらを使ったWebページを開発出来る。 |
titile, meta 等の要素の役割と使い方。
hr, 見出し, p, br, em, strong等の要素の役割と使い方。
HTMLのコメント。 |
| 【理解度確認】確認問題、実習課題 |
| 3 |
リストや表組みなど、複雑な要素の階層構造を持つWebページを開発出来る。 |
要素の階層構造 相対パス、絶対パス。
リストや表組みの要素の役割と使い方。 |
| 【理解度確認】確認問題、実習課題 |
| 4 |
リンクや画像表示などURLを使ったWebページを開発出来る。 |
img, a等の要素の役割と使い方URLの省略。
絶対パスと相対パス。 |
| 【理解度確認】確認問題、実習課題 |
| 5 |
リンクや入力フォームを使ってWebサーバーに情報を送信するWebページを開発出来る。 |
URLパラメーターや入力フォーム要素の役割と使い方 HTML5で廃止された要素と属性。
入力フォームの属性とURLパラメーターの関係やHTTPの詳細。 |
| 【理解度確認】確認問題、実習課題 |
| 6 |
適切な構造化を行ったHTMLを記述出来る。 |
header、main、footer、nav。
section、article、aside。 |
| 【理解度確認】確認問題、実習課題 |
| 7 |
これまでの学習内容を活かして、要件に基づいたWebページを作成出来る |
演習問題（HTMLのみ） |
| 【理解度確認】実習課題 |
| 8 |
CSSの位置づけを理解し、基本的なCSSを使ったWebページを開発出来る。 |
HTML要素の装飾。
コメントの書式や単位と色の指定。 |
| 【理解度確認】確認問題、実習課題 |
| 9 |
CSSを使ってHTML要素を装飾したWebページを開発出来る。 |
HTML要素の装飾。
コメントの書式や単位と色の指定。 |
| 【理解度確認】確認問題、実習課題 |
| 10 |
CSSのボックスモデルを理解し、段組でレイアウトされたWebページを開発出来る。 |
ボックスモデルの構造と要素。
段組を使ったレイアウト(マルチカラム・レイアウト、グリッドレイアウト)。 |
| 【理解度確認】確認問題、実習課題 |
| 11 |
レスポンシブWebデザインの考え方を理解し、デバイスの違いに応じて最適化されるWebページを開発出来る。 |
メディアクエリとスマートフォンへの対応。
オフラインWebアプリケーション。 |
| 【理解度確認】確認問題、実習課題 |
| 12 |
CSSアニメーションを使って、簡単なアニメーションを表現出来る。 |
transition、transform を使ったアニメーション・変形。 |
| 【理解度確認】確認問題、実習課題 |
| 13 |
Webページ作成における注意事項を理解し、ユーザビリティの高いUIを作成出来る。 |
Webページ開発におけるガイドライン |
| 【理解度確認】確認問題、実習課題 |
| 14 |
これまでの学習内容を活かして、要件に基づいたWebページを作成出来る。 |
演習問題（HTML・CSS） |
| 【理解度確認】確認問題、実習課題 |
| 15 |
期末試験を通じて、自身の理解度を確認出来る。 |
期末試験 |
| 【理解度確認】期末試験 |
