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