since: 20th/May/2002
CSS -Cascading Style Sheet は HTML 文書の表現方法を指定するための仕組みです。HTML が単なるテキストであるのと同じ意味で、 CSS も単なるテキストです。 HTML 文書のソースコード内部に記述すこともできますし、別のファイルに用意して複数の HTML 文書から読み込むように設定することもできます。
HTML は文書を要素の木構造で記述する言語であり、各要素は段落や見出しやアドレスやハイパーリンクのような意味を表現します。閲覧装置（ブラウザ）は HTML タグの意味に応じた表示体裁で出力します。どの閲覧装置（画像ベース、文字ベース、音声ベースなど）で閲覧しても、表現方法が変わるだけで、HTML タグの意味は不変です。
文書の意味（モデル）を変更することよりも、見栄え（ビュー）を変更したいことのほうが多いため、HTML による意味のマークアップと表示体裁の指定は分離していた方が望ましいことになります。 例えば、文字を大きくしたいために h1 要素を使うなどのように、HTML タグを本来の意味から離れて使うと、文書の汎用性が損なわれます。見栄えを指定する HTML 要素や属性を乱用すると、後で見栄えを変更するために、膨大な文書中の各場所毎に修正する必要があるので、非常に面倒であり、時として事実上不可能となります。
HTML では意味の表現に専念し、表示体裁は CSS で指定します。コンピュータスクリーンに対する表示体裁の指定、印刷されるときの表示体裁の指定、音声出力されるときの表現方法の指定、これらを提供するのが CSS という仕組みです。
HTML というのは、 HyperText Markup Language の頭文字をとったもので、リンクという仕組みを持ったマークアップ言語です。今ご覧になっているこの文書も HTML で書かれている HTML 文書です。 HTML は大きく分けると、従来の HTML と、後継の XHTML とに分けられます。本稿では、何らかの HTML/XHTML で文書が記述できることを前提としますが、 最初に HTML/XHTML とは何なのかおさらいします。
2002 年現在、ウェブページの記述において、最も広く使われています。
<!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>HTML とはなんだろうか。</title>
</head>
<body>
<p>HTML は <a href="http://www.w3.org/TR/html401/">W3C</a> で定義されています。</p>
</body>
</html>
HTML 4 は大文字と小文字を区別しません。 HTML 4 Transitional, HTML 4 Strict, HTML 4 Framest の三つの文書型が存在し、 HTML 文書はこれらのいずれかの文書型に従って記述されます。上に挙げた例は Strict の実例です。
この文書は、文字コードが Shift_JIS に指定されている事以外はきわめて一般的なものです。別の文字コードで保存する場合は適宜書き換えてください。
HTML 4 の後継言語です。将来の拡張のために、過渡的に用意された感があります
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=Shift_JIS" />
<title>XHTML 1.0 とはなんだろうか</title>
</head>
<body>
<p>XHTML 1.0 も <a href="http://www.w3.org/TR/xhtml1/">W3C</a> で定義されています。</p>
</body>
</html>
HTML 4 とほぼ同じですが、 XHTML では大文字と小文字を区別し、要素／属性は小文字で記述しなければならないほか、一部変更があります。 HTML 4 Transitional, HTML 4 Strict, HTML 4 Frameset に対応して、 XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset が存在すします。どの文型を使うにせよ、対応する HTML 4 の文書型とほとんど同じなので、将来的な移行準備のためには XHTML 1.0 で記述したほうが望ましいと思います。上に挙げた例は Strict の実例です。
この文書は、文字コードが Shift_JIS に指定されている事以外はきわめて一般的なものです。別の文字コードで保存する場合は適宜書き換えてください。
XHTML 1.0 の後継言語です。今後主流になるでしょう。
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=Shift_JIS" />
<title>XHTML 1.1 とはなんだろうか</title>
</head>
<body>
<p>XHTML 1.1 も <a href="http://www.w3.org/TR/xhtml11/">W3C</a> で定義されています。</p>
</body>
</html>
XHTML 1.0 Strict とほぼ同じですが、一部異なる部分もあります。 XHTML 1.0 Strict に対応した文書型しか存在しません。見栄え調整のための複雑な要素／属性を削ぎ落とした Strict を元にしているので簡単だといえます。これから習得するのならば、将来の拡張性も考えれば XHTML 1.1 を使うのが最良だと思います。
この文書は、文字コードが Shift_JIS に指定されている事以外はきわめて一般的なものです。別の文字コードで保存する場合は適宜書き換えてください。
いずれにしても、 HTML/XHTML は文書の一部分を意味の塊として考え、意味をタグによって表現する文書です。たとえば、 "<p>" から "</p>" までの間は、段落を意味します。 "<h1>" から "</h1>" までの間は、その文書内で最もくくりの大きい（階層が高い）見出しを意味します。
閲覧されるときは、モニタの大きさと種類／ウィンドウの大きさ／ブラウザの種類／文字の大きさと種類などはまちまちになります。誰がどのような装置で閲覧するのかは特定できません。ブラウザの種類一つとっても、画像が表示できる一般的なもの、文字だけしか表示できないもの、弱視者のための音声合成装置で表現するものなどが挙げられます。
HTML/XHTML が、文書の意味をタグで括って表現する（マークアップする） 言語であるために、閲覧装置がばらついても、意味だけはタグが表現した通りに共有できることになります。意味をマークアップするべき HTML/XHTML で見栄えを調整すると、閲覧装置によっては意味が把握できなくなり、データのゴミになりかねません。たとえば、悪い例として次のものが挙げられます：
HTML の習得に関するコンテンツが本サイト中にあります。ご利用ください。