2006年度 花園大学 HTML入門 講義資料

授業で学ぶこと

シラバス（講義概要）

授業の目的

XHTML と CSS で Webページを作成する方法を習得します。まずはXHTML と CSS で何が表現できるのかを気軽に味わってもらいつつ、徐々に文書構造（HTML）とデザイン（CSS）を分離する作成方法に進みます。その際、単に作成方法を学ぶだけではなく、なぜそういう方法を取るのか？という点にも積極的に踏み込んでいきたいと思っています。

授業内容（抜粋）

• Webの仕組み
• HTML, CSSとは？何ができるのか？
• Web標準とは？
• なぜWeb標準なのか？
• XHTMLによる構造化文書の基礎（書式、XML宣言、メタデータ、本文の諸要素など）
• CSSによるビジュアルデザインの基礎（書式、ボックスモデル、テキストや表のデザインなど）
• 標準規格と実装のジレンマ（環境によって見た目が変わる問題）※余裕があれば
• 実習（Webページの作成）

基本的な用語と概念

XHTML + CSS な Webサイトの参考事例集

1. Phono Phunk
   http://phonophunk.com/

   メインコンテンツとサブメニューの位置を切替えられる上（実は JavaScript で CSS を切替えている）、ウィンドウサイズに合わせてコンテンツサイズも変化するリキッドレイアウト（相対レイアウト）にもできる、かなり高度な技術を使っているサイト。

2. Mint: A Fresh Look at Your Site
   http://www.haveamint.com/

   注目のデザイナーShaun Inman 氏制作のサイト。アクセス解析の Webサービス: Mint のサイト、実際にどう動くかまでは残念ながら確認できないが、QuickTime 形式の demo が見られる。XHTML 1.0 + CSS + JavaScript。

3. scottschiller.com v4
   http://www.scottschiller.com/
   

   イフェクトを加えた事例。Scott Schiller 氏の個人サイト。Flash のようにページ内のコンテンツがアニメーションのように動くが、実は (XHTML + CSS +) JavaScript ベースの DHTML。

4. Pageflakes
   http://www.pageflakes.com/

   コンテンツを動的に追加・削除・編集できる上、すべてのコンテンツブロックを好きな位置に再配置できるようになっていて、しかも CSS は難易度の高いリキッドレイアウトで設計されている。イフェクトも多用している多機能なサイトだが、XHTML 1.0 + CSS の Web標準に概ね準拠して制作されている。現在 流行中の Ajax という技術も使っている、Web 技術の粋を集めたようなサイト。

5. Fortress Studio
   http://fortress.homelinux.com:81/

   XHTML 1.1 + CSS。横幅均等な左右２ペインからなるレイアウト。CMS で管理。

6. uwMike
   http://uwmike.com/

   リキッドレイアウト（相対レイアウト）を採用しているポスター調のテーマ。CMS管理。

7. ourcommon.com
   http://www.ourcommon.com/
   

   罫線付ノートを背景にした絵日記風のサイトテーマ。1024×768サイズを採用。

8. Nitram+Nunca
   http://nitram-nunca.main.jp/inside/

   画像を多用した邦人デザイナーのサイト。XHTML 1.0 + CSS。CMS 管理。

参考書

1. 益子貴寛『Web標準の教科書　―XHTMLとCSSでつくる"正しい"Webサイト』秀和システム、2005
   

   どちらかといえばプロの Web 業界人か教職関係者向け。Web 標準のイロハを XHTML | CSS 両面から解説。読み物としても辞典としても使えるように工夫されている。後方互換モードや目下規格策定中の CSS 3 や XHTML 2.0 など、過去や未来の規格にも言及。話題は CSS Hacks のようなブラウザ依存なものにも及び、原理主義に陥りがちなこの種の教科書にしては柔軟な姿勢で書かれている。

2. 深沢英次『Webデザイン・ハンドブック　―効率的なサイト制作のためのヒント＆ガイド』MdN Corporation、2005
   

   Webデザインにとどまらず、制作フロー・ユーザビリティとアクセシビリティ・ネットワークの基礎・Flash などのリッチメディア・FTP・CMS・SEO から果ては広告バナーサイズの規格にいたるまで、Webに関するあらゆるノウハウをコンパクトにわかりやすくまとめた書。

3. Eric A. Meyer『CSS完全ガイド 第2版』オライリー・ジャパン、2005
4. Christopher Schmitt『CSSクックブック　― Webデザインのための活用テクニック集』オライリー・ジャパン、2005
   

   CSS を W3C の規格に沿って、基本からじっくり修めたい人向け。現行ブラウザではまだ実装されていない部分にまで解説が及ぶため、実地で利用しない部分も内容に含まれる。上級者向け。

5. 『プロとして恥ずかしくないスタイルシートの大原則』MdN Corporation、2005
   

   プロが現場でよく使うテクニックが凝縮されている。わかりやすく、コンパクト。個人の私的なサイトなら、ここまでのノウハウは不要だが、プロの世界では必須のスキルばかり。

6. 『Web Designing』毎日コミュニケーションズ（毎月18日刊行の月刊誌）
7. 『web creators』MdN Corporation（毎月29日刊行の月刊誌）
   

   Web業界の定番雑誌。Web業界に就職希望の方は必読。強いてどちらの方が内容の質が高いかといえば『Web Designing』か。

練習問題

以下の文章を任意のタグでマークアップせよ。

HTML（えいち・てぃ・えむ・える）

HyperText Markup Language（ハイパーテキストマークアップランゲージ、HTML）は、SGMLアプリケーションの一つで、ハイパーテキストを利用してWWW上で情報を発信するためのマークアップ言語。WWW の基幹的役割をなす。情報を発信するための文書構造を定義するために使われ、ある程度機械が理解可能な言語で、写真の埋め込みや、フォームの作成、ハイパーリンクによるHTML間の情報連結が可能である。ハイパーテキスト・マーク付け言語とも呼ばれる。

文書構造を定義することにより、文字列と文字列の関係が明確になり、ユーザが内容にすぐたどり着く助けとなる。

参考: http://ja.wikipedia.org/wiki/HTML（Wikipedia）