• 東京藝術大学芸術情報センター 2012年度
• 前・後期、火曜2限

授業のテーマ

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

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

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

授業スライド

Google Driveのスライドが閲覧できない場合は、下記のdropboxのデータをダウンロードしてください。

• PDFスライドデータ

講義ノート

• 2012.04.09 : 第１回：オリエンテーション, Web概論
• 2012.04.17 : 第２回：HTML入門
• 2012.04.24 : 第３回：HTML入門 – 2
• 2012.05.08 : 第４回：HTML入門 – 3
• 2012.05.15 : 第５回：CSS入門 – 情報の形を視覚化する
• 2012.05.22 : 第６回：CSS入門 – ２ ボックスモデルを理解する
• 2012.05.29 : 第７回：CSSレイアウト
• 2012.06.05 : 第８回：TumblrでWebサイトを作成する – 1
• 2012.06.12 : 第９回：Tumblrを使う２ – テーマをカスタマイズする
• 2012.06.19 : 第10回：Tumblrを使う３ – カスタムHTMLテーマの作成
• 2012.06.26 : 第11回：Tumblrを使う４ – 静的ページの作成、サイトの設計
• 2012.07.03 : 第12回：Tumblrを使う５ – ソーシャルメディアで共有する

HTML5テンプレート

Dreamweaverを使用せずにHTMLを作成する場合は、下記のテンプレートを活用してください。

• HTML5テンプレート(Zip)

授業計画及び内容

1. ガイダンス，Web概論
2. HTML(1)：HTMLとは何か、HTMLの基本構造、段落、見出し
3. HTML(2)：ハイパーリンク、インライン画像
4. HTML(3)：リスト、テーブル、引用
5. CSS(1)：CSS入門
6. CSS(2)：セレクタ詳細、ボックスモデル
7. CSS(3)：CSSレイアウト
8. CSS(4)：CSSによるデザイン実践
9. 中間課題、Tumblrのページをリデザイン
10. 実践：イベント告知Webサイトを作る – プロジェクト企画と設計
11. 実践：イベント告知Webサイトを作る – ワイヤーフレームの制作、更新計画の策定
12. 実践：イベント告知Webサイトを作る – Webサービスを利用、様々なメディアを扱う
13. 実践：イベント告知Webサイトを作る – ソーシャルメディアとの連携、ソーシャルグラフ
14. 実践：サイト制作実習
15. 最終講評会

参考書

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

成績評価の方法

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

履修上の指示事項

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

講義の前半で、まずHTMLとCSSについて技術的な内容を理解します。後半は実践編として架空のイベント告知サイトの作成を通して、Webサイトを制作のためのプロジェクトの企画立案から設計、さらにソーシャルメディア(Twitter、Facebook、Google+など)との連携などを考慮しながら、実際にWebサイトを制作し公開します。