授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
HTMLでWebページを作成してWebブラウザで確認することが出来る。 |
【HTMLの基本構造】HTMLの役割と書式について学習して、基本的なWebページの作成方法と作成したWebページにブラウザでアクセスする方法を学ぶ。 |
| 【理解度確認】HTML演習課題 |
| 2 |
テキスト以外の要素をWebページ上に表示することが出来る。 |
【いろいろなコンテンツの挿入】箇条書きリストや表の作成方法と画像の挿入方法について学習する。また併せて別ページへのリンクを作成する方法について学ぶ。 |
| 【理解度確認】HTML演習課題 |
| 3 |
HTML5の基本的な構成通りにWebページを作成出来る。 |
【HTML5の文書構成】ヘッダー/メインコンテンツ/フッターなどを用いたHTML5によるWebページの構成方法について学習する。また併せて連絡先や著作権表示の入れ方について学ぶ。 |
| 【理解度確認】HTML演習課題 |
| 4 |
CSSファイルとHTMLファイルを連携させて、Webページのフォントサイズや色の変更をすることが出来る。 |
【CSSによるデザインI】CCSSの役割と記述方法について学習して、Webページのフォントサイズや色の指定方法について学習する。またCSSファイルとHTMLファイルとの連携方法を学ぶ。 |
| 【理解度確認】CSS演習課題 |
| 5 |
CSSでWebページ内のテキスト/リンク/表に装飾することが出来る。 |
【CSSによるデザインII】前回の続きとして、CSSで良く利用するテキスト/リンク/表の装飾方法を学習する。 |
| 【理解度確認】CSS演習課題 |
| 6 |
指定した幅に合わせてボックスに枠線や余白を付けることが出来る。 |
【ボックス】ボックスの基本概念である4つの領域について学習して、ボックスに背景/枠線/余白を付ける方法を学ぶ。またCSSの適用先の要素を指定するセレクタも学習する。 |
| 【理解度確認】CSS演習課題 |
| 7 |
ボックスレイアウトを利用したWebページを作成出来る。 |
【ボックスレイアウトI】ボックスを用いたレイアウトの方法について学習する。ここでは一般的なWebページで用いられるボックスレイアウトの手法について学び、実際にWebページを作成する。 |
| 【理解度確認】CSS演習課題 |
| 8 |
カラムレイアウトを用いたWebページを作成出来る。 |
【ボックスレイアウトII】ボックスレイアウトで良く使わているカラムレイアウトについて学習する。今回は実際にボックスを3段組みで配置しながら基本的な手法について学び、Webページの完成を目指す。 |
| 【理解度確認】CSS演習課題 |
| 9 |
ここまでの内容を基にWebページを制作出来る。 |
【補足・復習】ここまでの内容についての補足・復習を行い、後半の内容を学習するための準備を行う。 |
| 【理解度確認】課題 |
| 10 |
JavaScriptを用いて、Webページの内容の取得や変更をすることが出来る。 |
【JavaScriptによるDOM操作】WebページにおけるJavaScriptの役割と作成方法について学習する。ここでは実際にプログラムの作成と実行を行い、Webページにどのような効果を及ぼすことが出来るのか学ぶ。 |
| 【理解度確認】JavaScript演習課題 |
| 11 |
フォームの設置を行い、入力されたデータをプログラムで扱うことが出来る。 |
【フォーム】HTMLによるフォームの設置方法と設置したフォームからJavaScriptで入力した値を取得して、プログラムでフォームデータを取り扱う方法について学習する。 |
| 【理解度確認】JavaScript演習課題 |
| 12 |
Webページ内のオブジェクトをマウスで操作する処理を実装出来る。 |
【イベント処理】マウスなどの操作でWebページ内のオブジェクトを操作する方法について実装を行いながら学習する。 |
| 【理解度確認】JavaScript演習課題 |
| 13 |
画面サイズに応じてWebページのデザインの切り替えることが出来る。 |
【メディアクエリ】スマートフォンやタブレットなどのモバイルデバイス向けに、画面サイズを応じてCSSでWebページのデザインの切り替える方法について学習する。 |
| 【理解度確認】課題 |
| 14 |
Webページ内のオブジェクトをアニメーションさせることが出来る。 |
【アニメーションと絶対配置】CSS3などを用いてWebページ内のオブジェクトをアニメーションさせる方法について学習する。またアニメーションを行う際に必要となる絶対配置の方法も学ぶ。 |
| 【理解度確認】課題 |
| 15 |
ここまでの内容を基にWebページを制作出来る。 |
【まとめ】ここまでの内容を確実にするために、本講義のまとめと補足事項の確認などを行う。 |
| 【理解度確認】課題 |
