授業のテーマ

HTMLとCSSで作る、Webサイト制作の基礎。

HTML(= Hyper Text Markup Language)は、Webの文書の構造を記述するための言語です。また、CSS(Cascading Style Sheet)はHTMLで構造化した文書の体裁やデザインを記述するための仕様です。この授業はこの2つの仕組みを駆使して、Webサイトをデザインするための基礎技術の習得を目的とします。

HTMLとCSSは、現在も様々な機能を取り入れながら進化しています。この授業では、HTMLとCSSの基礎を押さえながら、今後の標準となっていくと思われる最新の機能(HTML5やCSS3)も紹介しながら、表面的な見た目だけのWebデザインではなく、その構造を深く理解した上でWebサイトを制作できるようになることを目標にしていきます。

講義ノート

• 2011.04.09 : 第１回：オリエンテーション、Web概論
• 2011.04.17 : 第２回：HTML入門
• 2011.04.23 : 第３回：HTML入門2 – ハイパーリンク、インラインイメージ、リスト
• 2011.05.08 : 第４回：HTML入門 3 – 情報をわかりやすく整理する
• 2011.05.14 : 第５回：CSS入門 – 情報の形を視覚化する
• 2011.05.22 : 第６回：CSS入門２ – ボックスモデルを理解する
• 2011.05.28 : 第７回：CSSレイアウト
• 2011.06.05 : 第８回：グリッドレイアウト、ワイヤーフレームの作成
• 2011.06.11 : 第９回：ナビゲーションの構造、サイトの設計
• 2011.06.19 : 第10回：データ共有サービスを活用する
• 2011.06.26 : 第11回：ソーシャルメディアで情報を共有する
• 2011.07.03 : 第12回：Xytosを使用してWebページを公開する
• 2011.07.28 : 補講：HTMLの今後 – HTML5で何が変わるのか

授業計画及び内容

1. ガイダンス，Web概論
2. HTML(1)：HTMLとは何か
3. HTML(2)：リンク、インライン画像、箇条書き
4. HTML(3)：テーブルを用いた２次元の情報表現
5. HTML(4)：自己紹介ページを作る
6. 中間講評会：自己紹介ページ
7. CSS(1)：CSS入門
8. CSS(2)：セレクタ詳細
9. CSS(3)：ボックスモデル
10. CSS(4)：CSSレイアウト
11. マルチメディアデータの扱い、Webサービスの利用
12. Webプロジェクトの企画と設計 1
13. Webプロジェクトの企画と設計 2
14. 総合制作
15. 最終講評会

開講日時

月曜5限

教材・参考書

授業資料はWebサイト(https://yoppa.org/)に掲載します。

参考図書：

• 「Webデザインメソッド」　矢野りん　ワークスコーポレーション
• 「IA100-ユーザエクスペリエンスデザインのための情報アーキテクチャ設計」　長谷川敦士　ビー・エヌ・エヌ新社

成績評価の方法

出席数、履修態度、課題提出(中間課題・最終課題)の内容を総合的に評価します。

履修上の指示事項

Macの基本操作(マウスの操作、文字の入力、ファイルやフォルダの操作)は理解している前提で授業を行います。