CSSの基礎

CSS(Cascading Style Sheet)はWebページのレイアウトを定義する技術としてW3C(World Wide Web Consortium)により1996年に勧告されました。HTML本来の「文書構造の定義」と、色やフォントサイズなどの「体裁の指定」とを分離させるべく考案されたものです。

【例　大見出しを16pt・赤、段落を青で表示する場合】

HTMLのみ
HTML
```
<h1> <font color="red" size="16"> 大見出し </font> </h1>
<p> <font color="blue"> これは段落です。</font> </p>
```
HTMLでは文書構造の定義（h1要素、p要素など）と体裁の指定（font要素など）が混在しています。
HTML+CSS
HTML
```
<h1> 大見出し </h1>
<p> これは段落です。 </p>
```
CSS
```
h1 {
  color: red;
  size:16pt;
}
p {
  color:blue;
}
```
HTML+CSSでは、HTMLの要素は文書構造の定義に使用するものに限定し、CSSで体裁の指定を行うことにより、文書構造と体裁を分離します。

また、文書構造の定義用の要素もブラウザによって体裁がついて表示されるものがあります。例えば、見出し（h1～h6）要素で文字サイズや文字の太さが変更されたり、引用（blockquote）要素でインデントがかかったりします。これらは、ブラウザごとに大きさが異なったりするため、ブラウザにより見た目が違ってしまう一因となります。

CSSを使うことにより、インデントをかけるためにblockquote要素を使用するとか、レイアウトのために表（table）を使うといった、本来の目的と異なる使い方をする必要がなくなります。

CSSのメリット

CSSを利用するメリットとしては、以下のものがあげられます。

Web標準：　様々なブラウザへの対応が楽になる。（後述）
サイト管理:　複数個所の同じ書式やレイアウトをまとめて指定・変更できる。
データ削減:　複数のページに共通する書式やレイアウトを一つのデータにできる。
表現力：　CSSでしか指定できない書式が指定できる。
SEO（Search Engine Optimization: 検索エンジン最適化）ができる。
デザインにCSSを使用しているブログのカスタマイズができる。

Web標準

Web標準（またはウェブスタンダード）は、Webにおける共通の取り決めです。今日では携帯電話などWebを見る手段が多様化し、PCでのブラウザも多種多様になり、個々の環境に対応したWebページを作るのは困難になっています。Web標準は、こうしたさまざまな環境に対応できるように設計されたもので、WebページもブラウザもWeb標準を満たすべきだという考え方が普及してきています。

Web標準には、構造化言語、プレゼンテーション言語、DOM(Document Object Model)、スクリプト言語などの種類があります。構造化言語としては、HTML4.01、XHTML1.0、XMLなどがあげられ、プレゼンテーション言語としては、CSS1、CSS2などがあげられます。近年では、XHTMLとCSSの組み合わせでWebページを作成することが標準化しつつあります。

この講義では、HTML4.01とCSS2の組み合わせを扱います。

ブラウザのCSS対応

CSSの対応は、ブラウザとそのバージョンごとに異なっています（参照：CSSバグリスト）。InternetExplorer（以後IE）に比べるとFirefoxはCSSの対応が進んでいます。また、IEはバージョンによりCSSの対応がかなり異なります。最新のIE8でようやくCSS仕様に沿った表示をするようになりましたが、IE7, IE6ではCSSの仕様に沿っていない箇所がありました。2010年8月の時点で、IE8, IE7, IE6のシェアは27.9%, 10.89%, 16.18%であり、不十分なIE7, IE6を切り捨てられない状態です。しかし、WebブラウザのCSS対応は年々進んでおり、古いブラウザのシェアも年々下がっていきますから、今後はWeb標準に沿ったWebページを作成するのが良いでしょう。

また、ブラウザによっては、Web標準に準拠した表示（標準準拠モード）と旧バージョンの表示（後方互換モード）の2種類の表示モードを持ったものがあります。IEもその一つです。IEではHTML文書の最初にDTD宣言があるものはWeb標準に準拠した表示を、ないものは従来の表示を行います。CSSでページを作る際には、必ずDTD宣言を入れてブラウザにWeb標準に準拠した表示をさせましょう。

この講義では、Firefoxを使ってCSSを学習します。IE7では表示が異なることがあるので注意してください。

Firefoxの初期設定

常磐大学Qs棟ではFirefoxの初期設定が必要です。以下の手順で初期設定を行ってください。

Firefoxの起動: スタート→すべてのプログラム→Mozilla Firefox→Mozilla Firefox
設定とデータのインポート:
1. 「Internet Explorer」を選択→「次へ」
2. 「Internet Explorerからホームページ設定をインポートする」を選択→次へ
3. 「完了」
「Firefoxは現在既定のブラウザに設定されていません。設定しますか？」: 「起動時に毎回確認する」のチェックを外す→「いいえ」
プロキシサーバの設定:
1. 「ツール」→「オプション」
2. 「詳細」→「ネットワーク」→「接続設定」
  - 「手動でプロキシを設定する」
  - 「httpプロキシ」: proxy.tu.tokiwa.ac.jp
  - 「ポート」: 8080
  - 「プロキシなしで接続」: 先頭に「tu.tokiwa.ac.jp, 」を追加
3. 「OK」を2回押してウィンドウを閉じる。

CSSのためのHTML

W3Cでは、CSSとの組み合わせを考慮して、要素を推奨・非推奨・フレームの３種類に分類しています。

	推奨	非推奨	フレーム
ブロック要素	address, blockquote, div, dl, form, h1～h6, hr, ol, p, pre, table, ul, fieldset, noscript	dir, center, isindex, menu, xmp
インライン要素	a, acronym, abbr, b, bdo, big, br, button, cite, code, del, dfn, em, img, i, input, ins, kbd, label, map, object, q, samp, script, select, small, strong, sub, sup, span, textarea, tt, var, iframe	basefont, font, s, strike, u
その他	html, head, body, title, meta, li, dd, dt, thead, tfoot, tbody, tr, td, th, caption, colgroup, col, link, base, param, applet, area, option, optgroup, legend	plaintext	frameset, frame, noframes

推奨要素のほとんどが文書構造の定義のものであることがわかります。

div、spanは、指定した範囲をブロック要素、インライン要素にするためのものであり、CSSと合わせて使用します（詳細は後述）。

また、共通属性として、以下のものが使われます（詳細は後述）。

id	要素に固有の識別子をつけます。文書中に一箇所しか使えません。
class	要素を分類する識別子をつけます。文書中の複数の要素で共有できます。また、空白でしきった複数の識別子を記述することもできます。
style	スタイルシートによるスタイルを指定します。

CSSによるWebデザインをする際には、W3C推奨要素のみ使用します。属性にも非推奨なものがあるので注意しましょう。

DTD(Document Type Declaration)

DTDは、文書が基づいているルールを宣言します。HTML文書としては省略しても構いません。３つのルールを紹介します。

HTML 4.01 厳密型DTD （非推奨要素・属性、フレームを含まない）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

もっとも厳密なルールにそって作られるHTML文書です。非推奨要素や非推奨属性を使用することができません。

HTML 4.01 移行型DTD （非推奨要素・属性を含む）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

非推奨要素や非推奨属性を使用することができますが、フレームに関する要素を使用することができません。

HTML 4.01 フレーム型DTD （非推奨要素・属性、フレームを含む）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

非推奨要素や非推奨属性に加えてフレームに関する要素を使用することができます。

したがって、CSSを使う際には、DTDはHTML4.01厳密型（Strict）を記述します。

HTML推奨テンプレート

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>
</body>
</html>

また、Web標準を目指すのであれば、Validな（正しい）HTMLを記述すべきです。ValidなHTMLにはルールがいくつもあるのですが、いくつかポイントを紹介しておきます。

見出しには大見出し(h1要素)から昇順でつける。間の数値を飛ばさない。また、ページ内にh1要素は一箇所しか使用しない。
img要素には必ずalt属性を付ける。

興味がある人はValidかどうかのチェックをしてくれるW3Cのバリデータもあるので調べてみてください。

css Zen Garden

CSSに関する有名なサイト「css Zen Garden」を紹介します。このサイトでは、このサイトのCSSを募集してデザインの優秀さを競えるようになっています。これは、同じHTMLのファイルに対して、異なったCSSを用いることでここまで表現が変わるということを示している良い例です。

日本語で読みたい人は、css Zen Garden(日本語訳)を見てください。

css Zen Gardenの歩き方

最初のページの右側のメニュー上部には、「select a design」という箇所があり、その下にはデザインの名前がついたリンクがあります。このリンクを辿ると異なったデザインになります。デザインが異なっても文書の中身が変わっていないことに着目してください。

css Zen Gardenのソース

最初のページの左上には、「download html file and css file」という箇所があり、「html file」と「css file」には各々のファイルに対するリンクがあります。「html file」をクリックすると、CSSの適用されていないHTML文書が表示されます。css fileをクリックすると、CSSファイルの中身が表示されます。

css Zen Gardenのサムネイル

「Archives」欄には、「View All Designs」のリンクがあり、サイト「mezzoblue css Zen Garden Design List」にて各デザインページのサムネイルを見ることができます。いろいろなデザインを眺めたい場合には便利です。

課題

css Zen Gardenに掲載されているWebページで自分の気に入ったページを一つ選択し、その理由を述べよ。