• 東京藝術大学 芸術情報センター(AMC)
• 木曜4限
• 通年 (半期でDTPと交替)

授業のテーマ

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

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

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

講義の前半で、まずHTMLとCSSについて技術的な内容を理解します。後半は、Tumblrというマイクロブログサービスを使用して、オンラインポートフォリオを制作し、公開します。

最終課題

Tumblrを使用して、自分の「オンライン・ポートフォリオ」を作成してください。自分自身の活動や作品を、世界に向けて発信するWebサイトを目指してください。

掲載する情報は、経歴、写真、画像、イラスト、音、テキストなど何でも構いません。ただし、基本的に本人が作成した作品を載せてください。

7月17日の授業内で、発表してください。ただし、最終の締切は7月末（7月31日）とします

授業計画及び内容

• ガイダンス，Web概論
• HTML（1）：HTML入門
• HTML（2）：ハイパーリンク、インラインイメージ、リスト
• HTML（3）：リスト、テーブル、引用
• CSS（1）：CSS入門
• CSS（2）：セレクタ詳細、ボックスモデル
• CSS（3）：CSSレイアウト、CSSによるデザイン実践
• CSS (4) Webフレームワークを使う – Twitter Bootstrap
• CSS (4) CSSフレームワークを使う 2 – Twitter Bootstrapのカスタマイズ
• Tumblr入門：TumblrでWebサイトを作成
• Tumblr入門2：テーマをカスタマイズする
• Tumblr入門3：カスタムHTMLテーマの作成
• Tumblrを使う4 – Webサイトを構成する、固定ページとタグ
• 実践：サイト制作実習
• 最終講評会

教材・参考書

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

参考図書：

• 「Webデザインメソッド」矢野りん、ワークスコーポレーション
• 「IA100-ユーザエクスペリエンスデザインのための情報アーキテクチャ設計」長谷川敦士、ビー・エヌ・エヌ新社
• 「Designing Tumblr デザイニング・タンブラー」古屋 蔵人、高岡 謙太郎、ビー・エヌ・エヌ新社

成績評価の方法

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

履修上の指示事項

本講義は美術学部デザイン科学部２年生を対象とした必修授業です。Macの基本操作（マウスの操作、文字の入力、ファイルやフォルダの操作）は理解している前提で授業を行います。