授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
HTMLの基本書式のルールを理解し適切に記述できる。ごく簡単なHTMLを使ったページを作成出来る。 |
HTMLの基本書式。body、html、head、title等の基本的な要素の意味と役割を学習する。
テキストエディタの使い方。 |
| 【理解度確認】課題 |
| 2 |
良く使われるHTML要素の意味とその役割を説明出来る。それらの要素を使い簡単なページを作成出来る。 |
Webサイトで良く使われるHTMLの頻出要素について学ぶ。 |
| 【理解度確認】課題 |
| 3 |
複数ページを使い相互にリンクを設定できる。相対パス、絶対パスの違いを説明出来る。 |
文字コードの指定、HTMLのバージョンによる違い、相対パスと絶対パスの違い、リンクの設定の仕方について学ぶ。 |
| 【理解度確認】課題 |
| 4 |
セクショニングコンテンツに属する要素の役割とアウトラインの仕組みを説明出来る。それらの要素を適切に使い文章構造に沿ったマークアップが出来る。 |
tableの作り方、文章構造に沿ったマークアップ、セクショニングコンテンツ |
| 【理解度確認】課題、小テスト |
| 5 |
CSSを用いて文字の大きさや色、背景などを変えることが出来る。
idとclassを適切に使い分けることが出来る |
CSSの基本書式、idとclassの付け方、ボックスモデル |
| 【理解度確認】課題 |
| 6 |
CSSの優先度を理解し、基本的なセレクタを使うことが出来る。
簡単なレイアウトを組むことが出来る。 |
CSSの基本セレクタ、優先度、基本的なレイアウトの組み方 |
| 【理解度確認】課題 |
| 7 |
CSS Gridを使い簡単なレイアウトを組む事が出来る。 |
CSS Gridを使ったレイアウトの組み方について学ぶ。CSS Gridの仕組みとCSS Gridで使うプロパティについて学ぶ。 |
| 【理解度確認】課題 |
| 8 |
CSS Gridを使い少し複雑なレイアウトを組む事が出来る。 |
CSS Gridを使ったレイアウトの組み方について学ぶ。 |
| 【理解度確認】課題 |
| 9 |
flexboxとfloatを使ったレイアウトを組む事が出来る。 |
flexboxとfloat使ったレイアウトの組み方について学ぶ。 |
| 【理解度確認】課題 |
| 10 |
positionプロパティを使ったレイアウトを組む事が出来る。 |
positionプロパティの特徴と利用方法について学ぶ。 |
| 【理解度確認】課題 |
| 11 |
RWDの技術を理解し、基本的なRWDのサイトを作成する事ができる。 |
RWD(レスポンシブ Webデザイン)の技術的要素と特徴を学ぶ。 |
| 【理解度確認】課題 |
| 12 |
企画に沿って情報を整理し、画面を設計することが出来る。 |
実践的なWebサイトの制作①
情報の整理、企画、設計 |
| 【理解度確認】企画書の作成 |
| 13 |
Fiigma、Adobe XDやPhotoshopなどでデザインを作成し、それを適切にコーディングすることが出来る。 |
実践的なWebサイトの制作②
画面の設計、モックの作成 |
| 【理解度確認】課題 |
| 14 |
W3Cの仕様に沿ったWebサイトを作成することが出来る。またGitを利用したコードの管理方法を学ぶ。 |
Gitによるコードのバージョン管理方法、VS CodeでのGitの使い方 |
| 【理解度確認】課題 |
| 15 |
企画の内容、作成した作品について的確にプレゼン出来る。 |
作品プレセンテーション |
| 【理解度確認】プレゼンテーション |
