ウェブサイト構築のヒント集 ＞ 「CSS の分離」
背景色が白で文字が黒色。これがデフォルト・スタイルとなります。 ブラウザの設定でデフォルト値の変更はできますが、ここではその手のカスタマイズは一切行わない前提でハナシを進めていきます。
行と行の間隔（行間）がキツキツなのは、例えば IE6 なら初期値（デフォルト値）が 1.1 に設定されているからです。 2.0 だと行と行の間に一行分の空白が開くと思っておいてください。 故に 1.1 だとキツキツです。
デフォルト値というモノはあまり意識されませんが、あらゆる要素（p、pre、strong、em、h1、h2、h3... など）にはあらかじめ デフォルト値が設定されています。 デフォルト値はブラウザ（Internet Explorer、Netscape、Mozilla、Opera など）に設定されています。 全てのブラウザが全く同一のデフォルト値を持っているかというと、メーカーによって若干異なります。
<h1> は見出しであり、一つのファイル（一つのページ）に一回だけ用いるような要素です。 新聞には大小様々な見出しがありますが、一番大きくて一番目立つ見出しが大見出しとなります。
<h1>（開始タグ）と </h1>（終了タグ）で囲まれた部分が何を意味するのか？ というと、 <h2> より重大な見出しであるコトを意味します。 <h2> は <h3> より重大な見出しであるコトを意味します。 最終的には <h6> まであります。
通常、h1 要素で括られた部分のテキストは大きな文字で表示されます。
これは前述したあらゆる要素（p、pre、strong、em、h1、h2、h3... など）にはあらかじめデフォルト値が設定されている
という通りの表現体裁であり、あえて指定しなくとも大きく表示されるのは、
デフォルト値がＬサイズに（多くのブラウザで）設定されているからです。
h3 は普通の文字より大きくなり、h2 はさらに大きい文字になり、h1 は最上級に大きい文字になる。 と、いうのは見たマンマですが、だからといって h1 は h2 より大きいという具合に解釈しないようにしましょう。 h1 は h2 より重大な見出しであると考えてください。
| h1 | h2 | h3 |
|---|---|---|
| HTML と CSS の分離 | ||
| デフォルト値とは？ | ||
| 見出しの説明 | h1 は何を表すか？ | |
| h1 は h2 より大きい？ | ||
| 当ページでの見出し使用法 | ||
| ストリクト（厳密）で可能な表現 | ||
| 外部 CSSファイルの参照 |
一応、考え方としては h1 は一回ポッキリ、h2 は h1 の子、h3 は h2 の子となります。
なので、h2 で見出しの説明
を謳っている以上、
h3 は見出しに関するトピックばかりとなっています。
このように文書構造に関する論理的な背景が各要素にはありますので、
単に文字のサイズを大きくするのが h1 や h2 の役割であるとは考えない方が得策です。
このページ（base.html という名称のファイル）ではスタイル・シートを全てデフォルト値のまま記述しています。 あまりにも素っ気ないというか、無愛想かつ淡白な白黒表現となっています。 しかし、スタイル・シートを変更せずともページに色を付ける方法は広く知られています。 例えば、以下のような要素を用いるコトによって。
<body bgcolor="green"> <font color="red"> <td bgcolor="yellow">
上記の用例はブラウザのメーカーが独自に作り上げたものなので、厳密な理屈では非推奨とされている用例です。 非推奨の表現は CSS（スタイル・シート）を用いるコトによって代替可能なので、今回は使用を控えました。 標準のものだけを用いて CSS も全デフォルト（完全無指定）にしてしまうとご覧の通り、 配色を指定するコトすら叶いません。
しかし、理屈っぽく論理的に考えてみますと、背景色が緑だったらどういう意味があるのでしょうか？ あるいは、 赤色の文字があったとしてどのような意味があるのでしょうか？ 別にいちいち意味はありません。 様々なカラーを用いた方が表現の幅が増えるし、 アクセントを付けてメリハリを効かすコトもできるといった見た目の問題に着地するのみです。
論理的構成とレイアウト関連は分離させた方が合理的です。 非推奨の記述を避け、標準用法だけで HTMLファイルを構成していくと必然的にデザインには関われなくなり、 「文章の構成を定義している記号はあるものの、配色や配置に関する指定はナシ」という具合になります。 非推奨の要素などを避けて、標準仕様のものだけを使う前提では HTML では見た目を全くといっていいほど考慮できません。
編集部に文字だけの原稿を渡したら（デザインを盛り込んだ形で）文章が雑誌に掲載された、とでも考えてください。 そう、HTML における記述作業は原稿用紙に作文を書くようなものです。 作文（原稿）執筆の段階で着色したり、段落の配置バランスや装飾を考える必要は無いのです。 ただし、文章の区切りや前後の関係を整理する為に <p> や <pre> や <h1> などを記述しておく必要はあります。
最後に、味気ないこのページにスタイルを施してみようと思います。 下記のリンクを押すと JavaScript による外部参照ファイルが呼び出されて、 body、h1、h2、h3、p、pre、ul、strong などの要素が持っているスタイルのデフォルト値が変更されます。 素材はそのまま変化させずに、（外観だけ）近代的なウェッブページに変化させるコトになります。