1. HTML とはなんだろうか

Since: May/30th/2004

CSS (Cascading Style Sheets) は、HTML/XHTML 文書の見栄えを指定するものです。最初に、HTML/XHTML 文書がどのようなものであるのかを復習しておきます。

HTML の種類

HTML は大きく分けると HTML と、その後継規格である XHTML に別れます。いずれにしても、一つの HTML 文書は、タグと呼ばれる区切り文字列で部分を意味的にブロック化し、要素をノードとする木構造として把握できます。CSS は、この木構造を操作対象にしてレンダリング方法／表示方法／表現方法を指定します。

HTML/XHTML と CSS

概念的な説明になりますが、ブラウザのようなユーザエージェントは、文書を木構造として解釈し、文書の木構造の各ノードに対してスタイルシートを適用した結果を表示します。

XML 文書の場合は、パーサと呼ばれるソフトウェアが木構造（ソース・ツリー）を構築して構文解析し、それを受け取ったスタイルシートエンジンがスタイルシートを読み込んで、必要があれば変換（トランスフォーム）した結果（リザルト・ツリー、結果ツリー）に表現方法（フォーマッティング）を与えて、レンダリングエンジンが表示するという方法をとります。XHTML は XML として定義されたものなので、基本的には同様です。現実的な実装では、ブラウザの殆どは単なる HTML として処理しますが、概念的には同様です。HTML/XHTML 文書は木構造であり、CSS はそのノードに対して表現方法を指定します。

それぞれのソースを以下に掲載します。意味が分からない場合は、スピードラーニングを参照してください。

HTML 4 文書の実例

2002 年現在、ウェブページの記述において、最も広く使われているのが、 HTML 4 Transitional です。Transitional から、利用が推奨されない機能を削除したのが Strict です。次のソースは Strict の実例です。

<!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 4 の HTML 文書はこれらのいずれかの文書型に従って記述されます。

この文書は、文字コードが Shift_JIS に指定されている事以外はきわめて一般的なものです。別の文字コードで保存する場合は適宜書き換える必要があります。

XHTML 1.0 文書の実例

HTML 4 の後継言語です。将来の拡張のために、過渡的に用意された感があります。次のソースは HTML 4 Strict に対応した XHTML 1.0 Strict の実例です。

<?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 で記述したほうが望ましいと思います。

※ XHTML 1.0 文書は、application/xhtml+xml だけでなく、後方互換のために text/html でも良いとされます。同時に、application/xhtml+xml である文書には、meta http-equiv を与えないように推奨されていますので、後方互換のために meta http-equiv を記述するときは、メディアタイプは text/html の方が良いといえます。

XHTML 1.1 文書の実例

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 を使うのが最良だと思います。

※ XHTML 1.1 文書は、application/xhtml+xml であるべきだとされます。同時に、application/xhtml+xml である文書には、meta http-equiv を与えないように推奨されています。現状では、文字化け回避などの後方互換性のために、meta http-equiv を与えたほうが現実的ですが、正しくは、HTTP ヘッダなどで与えるのが正しい方法です。XHTML 1.1 文書に meta http-equiv を記述するときは、推奨されていないことを考慮したうえで実施してください。

CSS と HTML/XHTML

HTML/XHTML 文書は、段落や見出し、ハイパーリンクなどの要素の集合として文書を表現する仕様です。要素間には親子関係／兄弟関係があり、文書全体は、要素をノード（節）とする機構造で捉えることができます。CSS は、HTML/XHTML 文書の各要素に対して、見栄えを指定する仕様です。