─
【第1週目】
［目標］
HTMLの基礎知識として，HTMLの役割とCSSの役割を理解する。
HTMLとCSSを利用し簡単なウェブページをコーディング出来るようになる。
─
［授業の流れ］
● オリエンテーション及び課題説明
● Webページとは
最小限のHTMLファイルのサンプルを確認，ブラウザ上の表示とコードの確認
【サンプル】01_helloworld
● HTMLタグの役割と文章の構造化について
プレーンテキストで配布したレシピを使用しテンプレートをベースにマークアップ
【サンプル】03_markup
● CSSとは
HTMLとCSSの関係の説明。CSSのリンクを切り換えて表示の変化を確認
【サンプル】03_css
● 画像を追加する
タグの紹介─タグを利用して画像を表示する
【サンプル】05_img
● ハイパーリンク01─異なる文章同士のリンク
レシピのページから，作者紹介のページにリンクを貼る
【サンプル】06_hyperlink_01
● ハイパーリンク02─同じページ内へのリンク
【サンプル】06_hyperlink_02
● ページ内のオートスクロール
構想する上で可能な表現として早めに紹介。詳細は後日。
【サンプル】07_scroll_js
─
【第2週目】
［目標］
CSSを利用したレイアウトの基礎（フローレイアウト）を理解する
─
［授業の流れ］
● CSSを利用したレイアウト
｢ボックスモデル｣の説明および「フローレイアウト｣による背初期紹介ページの作成。
【サンプル】01_box_model
● 背景画像
表現手法のひとつとして配付・紹介。詳細は省く。
【サンプル】02_bgimage
● ウェブフォント
技術のひとつとして配付・紹介。詳細は省く。
【サンプル】03_webfont
─
【第3週目】
［目標］
フローレイアウトによりヘッダーとフッターをもつ2カラムのウェブページが作れるようになる。
ポジションレイアウトの紹介と習得
─
［授業の流れ］
● CSSによるフローレイアウトの復習・ポジションレイアウトの紹介と習得
postion: absolute（絶対）, postion: fixed（固定）, postion: relative（相対）
【サンプル】CSS_Layout
─
【第4週目】
［制作日］
課題に対する個別の相談に対応する。
─
[第5週目】
［講評］
事前提出した作品を各自が操作しプレゼンテーションする。