授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
Webサイトが表示される仕組みを説明出来る。HTML文書の基本的な構造が説明出来る。 |
マークアップ言語の歴史と発展を踏まえた上で、HTML5とCSSの役割と用途、クライアントバとサーバ間の通信の仕組み、Webブラウザの働きについて学習する。また、HTML文書の基本的な構造についても学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 2 |
HTML Living Standardに準拠したHTML文書を作成出来る。 |
HTML (1)：HTML Living StandardにおけるDOCTYPE宣言およびmeta要素の働き、適切なHTML5の文書の記述方法について学習する。併せて、要素の構成についても学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 3 |
文書、リストを利用したWebサイトを作成出来る。 |
HTML (2)：見出し、段落などWebサイト作成上必須となる要素、リスト要素について学習する。 |
| 【理解度確認】 小テスト、練習問題 |
| 4 |
画像、動画等のリソースを指定する要素を利用したWebサイトを出来る。 |
HTML (3)：URIの記述方法を踏まえた上で、リソースの指定方法について学習する。画像や動画等を取り扱うimg、video等の要素について学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 5 |
サイト内リンクを利用したWebサイト、表を利用したWebサイトを作成出来る。 |
HTML (4)：主にa要素、table要素の使用方法を学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 6 |
header、main、footer要素などを用いて、Webサイトの基本構造が説明でき、それに基づいたWebサイトを作成出来る。 |
HTML (5)：Webサイトの基本構成要素となるheader、main、footerなどの要素について学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 7 |
CSSの基本的なプロパティを利用したWebサイトを作成出来る。 |
CSS (1)：CSSの基本文法及び主要なプロパティ等について学習する。また、style要素によるCSSの指定方法、link要素による外部CSSの読み込み方法等について学習する。 |
| 【理解度確認】 小テスト、練習問題 |
| 8 |
セレクタの組合せ、優先順位について説明出来る。主要な擬似クラス、擬似要素を利用したWebサイトを作成出来る。 |
CSS (2)：タイプセレクタ、クラスセレクタ等の各種セレクタ、及びそれらの組合せ、優先順位について学習する。また、link、hover等の主要な擬似クラス、主要な擬似要素についても学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 9 |
CSSにおける色、大きさについて説明出来る。色、大きさを指定してテキストを修飾出来る。 |
CSS (3)：CSSにおける色、大きさの扱い、テキストを修飾するプロパティについて学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 10 |
ボックスモデルについて説明出来る。 |
CSS (4)：ボックスモデルについて学習する。また、ボックスモデルを利用した基本的なレイアウトについて学習する。 |
| 【理解度確認】 小テスト、練習問題 |
| 11 |
ボックスモデルについて説明出来る。 |
CSS (5)：ボックスモデルにおける背景や位置の指定について学習する。 |
| 【理解度確認】小テスト、練習問題 |
| 12 |
様々なレイアウトのWebサイトを作成出来る。 |
CSS (6)：フレックスボックスを利用したレイアウトについて学習する。 |
| 【理解度確認】 練習問題 |
| 13 |
様々なレイアウトのWebサイトを作成出来る。 |
CSS (7)：グリッドレイアウトを利用したレイアウトについて学習する。 |
| 【理解度確認】練習問題 |
| 14 |
CSSフレームワークを利用したWebサイトを作成出来る。 |
Bootstrapの導入方法と基本要素について学習する。 |
| 【理解度確認】 練習問題 |
| 15 |
総合テストによって学習内容の理解度を確認する。 |
これまでの学習内容の総合テストを実施する。 |
| 【理解度確認】総合テスト |
