このページはHTML 4.01に準拠しています。
World Wide Web Consortium（W3C）は1997年12月にHTML 4.0規格を策定しました。 これは1999年12月に多少改訂され HTML 4.01 となりました。 この新しいHTMLでは，文書の論理的枠組みを記述するというHTML本来の目的に添った部分だけを残し，見栄えを飾るための仕組みはスタイルシートという別の枠組みに移しました。
ここではHTML 4.01とスタイルシートの基本を解説します。 なお，この文書自体がHTML 4.01とスタイルシートを使って書かれています。
HTML 4.01では，たとえば次のように書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html; charset=EUC-JP"> <title>タイトル</title> </head> <body> ……（ここに本文が来る）…… </body> </html>
1行目はHTMLのバージョンの宣言です。 このように書いておけば新しいブラウザでは新しい方式（Mozilla では Standards compliance mode，Internet Explorer 6 では standards-compliant mode と呼ばれる方式）で表示が行われます。
HTML 4.01にほぼ準拠するけれども古い方式（Mozilla では Quirks mode）を使いたい場合は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書いておきます。
4行目は，HTML 4.01に直接は関係ありませんが，META タグ を使って文字コードの指定をしています。 この例はEUC-JPの場合です。 Shift-JISで書くなら EUC-JP のところを Shift_JIS にします。 また，いわゆるJISコードなら ISO-2022-JP です。 英語などの主なヨーロッパ語なら ISO-8859-1 です。 最近の多国語用のお薦めは UTF-8 です。 これらは大文字，小文字を区別しませんので，shift_jis 等と書いても同じです。
【参考】Netscape Navigator 2.0 では EUC-JP，SHIFT_JIS の指定をすると逆に必ず文字化けしてしまいました。
HTML 4.01ではHTML文書本体には論理的なマークアップだけを書き込み，見栄えに相当することはスタイルシートで行うことになっています。 スタイルシートは通常は別ファイルにします。
スタイルシート用の言語は，原理的にはHTMLと独立で，いろいろな種類がありえますが，今のところCSS（Cascading Style Sheets）という言語が使われています。 Cascading（滝のように続く）という意味は，複数のスタイルを順次適用することができるという意味です。 同じものに対して複数の定義があれば，後の定義が優先されます。 以下ではCSS Level 1（CSS1）について解説します。
たとえば mystyle.css というファイルにスタイルを記してあるなら，HTML文書には
<head> <title>...</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
のようにしてファイル名だけを記し，mystyle.css というファイルに，たとえば
body { margin-left: 20% }
のように書いておきます。 これは本文の左マージンを20%とるという意味です。
あるいは，別ファイルにするかわりに，
<head>
<title>...</title>
<style type="text/css">
body { margin-left: 20pt }
</style>
</head>
のようにHTML文書中に埋め込むこともできます。
複数の性質を決めるときは ; で区切ります。たとえば
body { margin-left: 20%; background: url(foo.png) #FFC }
とすれば，さらに本文の背景が #FFC という色（クリーム色）で，foo.png という画像を敷き詰めることになります。
次にいろいろな書き方を列挙しておきます。
長さの単位には px，in，cm，mm，pt，pc，em，ex が使えます。 色は名前のほか #CCC とか #FFFFCC のような書き方が使えます（→ もっといろいろ）。
たとえば
H1: { clear: left }
と書いておけば，すべての H1 は左寄せの図がなくなってから置かれます。 clear: の後には left 以外に right，both，none が書けます。
このページは
body { background: #FFF; margin-left: 10%; line-height: 1.6 }
h1,h2 { margin-left: -8%; }
p { text-indent: 1em; margin: 0 }
p.noindent { text-indent: 0em }
pre { color: maroon; margin-left: 2em; line-height: 1.2 }
tt { color: maroon }
というスタイルファイルを使っています。 ここでは単なる p 以外に p.noindent を定義しています。 これは，<p> を1em（全角1文字）だけインデントしているのに対して，<p class="noindent"> と書くことによってインデントしない段落にするためです。 これらはよく </pre> や </blockquote> の直後で使います。 上の </pre> の直後でも使っています。
以下は私がふだんよく使うスタイルシートの例です。
body { background: white; line-height: 1.5; margin: 5% }
h2 {
font-size: large;
margin: 2em 0em 0em 0em;
padding: 0.2em 0.5em;
border-width: thin;
border-color: white;
background-color: #99F;
}
pre { color: maroon; line-height: 1.2; margin-left: 2em }
tt { color: maroon }
em { font-style: normal; color: #F30 }
a:hover { color: red }
a[name]:hover { color: black }
blockquote {
border-color: #999 #ccc #ccc #999;
border-style: solid;
border-width: 3px;
margin: 1em 3px 1em 3px;
padding: 0em 1em 0em 1em;
}
一部分だけにスタイルシートを適用するには
一部分だけに<span style="color: green">スタイルシート</span>を適用する
のようにします。 また，（いくつかの）段落に適用する場合には
<div style="color: green"> ここは緑。 </div>
のようにします。
body {
background: white;
margin: 5%;
/*/*/ line-height: 1.5; /* */
}
JavaScript を使う方法もあります。 具体的には，head 部分に
<script type="text/javascript" src="head.js"></script>
のように書き，head.js は次のようにしておきます。
if (document.getElementById) {
document.writeln('<style type="text/css">');
document.writeln('body { line-height: 1.5 }');
document.writeln('pre { line-height: 1.2 }');
document.writeln('<\/style>');
}
このページはHTML 4.01に準拠しています。
Last modified: 2005-05-04 14:22:02