CSSHTML

1998/09/28
本文を XHTML に、 スタイルシートを NN6 用に改訂 - 2000/04/10
[Valid CSS!]


このページは、 Netscape Navigator 4.0 (以下、 NN4) では、 表示がおかしいかもしれません。 その場合は、 オプションで、 スタイルシートの使用を止めてください。


混乱した HTML

HTML は、 文書の構造を示すためのものだったはずです。

章の見出しには <H1>、 節の見出しには <H2> . . .
強調したいから <strong>、 データを整理して見せたいから <table> . . .
という使い方が、 想定されていたはず。

ところが、 現実には、 <H1>, <H2> . . . を文字の大きさの制御に、 <table> を文字のレイアウトの制御に、 という使い方が、 はびこっています。 (私自身、 テーブルを駆使した HTML を、 たくさん書いてきました。 f(^^; )

これでは、 文書の構造なぞ、 どこかへ行ってしまいます。

見栄えの良い Webページを作りたい、 けれども、 HTML にはレイアウトする機能が無い。 だからしょうがないじゃないか . . .  という言い訳も、 今までは通用しました。 しかし、 Microsoft の Internet Explorer 4.0 (以下、IE4) が、 CSS1 の機能を (ほぼ) 備えた今は、 その言い訳をやめるべきときなのです。

* 2000/4/10 追記: Netscape Navigator 6.0 では、 IE5 以上に精確に CSS1 が実装されました。

ところで HTML とは

HTML (HyperText Markup Language) とは、 SGML (Standard Generalized Markup Language) アプリケーションである。

. . . では、 なんのことだか判りませんね。 (^^;

SGML では、
1. 文書型定義 (DTD - Document Type Definition) を定義し、
2. DTD に従って文書 (文書インスタンス - Instance - という) を書く。
ということになっています。
このうちの、 DTD が HTML の仕様書で定められているもの、 が HTML (の文書) なわけです。

文書型とは、 SGML では、 文書の構造を指します。 「見出し」であるとか、「引用」であるとかの、 抽象的な構造のことです。 そして、 文書がどのような見栄えになるかということは、 いっさい含まれていません。

したがって、 その一つである HTML にも、 文書がどのような見栄えになるかということは、 いっさい含まれていないのです。 (そのはず . . . なのですが、 実際には例えば <center> といったタグが存在していたりします。 f(^^; )

とはいっても、<H1> は大きいフォントで表示されるし、 <strong> は太いフォントで表示されるじゃないか?
ごもっともです。 しかし、それを決めているのは、 (CSS を使っているのでなければ) Web ブラウザなのです。 <H1>赤い文字で、 <strong>下線付き文字で、 表示される Webブラウザがあったとしても、 なにもおかしくないのです。 (IE4 では、 「ユーザースタイルシート」を使うことで、 実際にそういう表示が可能です。)

CSS の出番

では、 SGML では、 文書の見栄えを指定することはできないのか?
そんなことはありません。 SGML の中だけでは、 たしかに不可能ですが、 作成した SGML 文書の他に、 見栄えを制御するためのスタイルシートを用意することで、 それが可能となります。

HTML 用のスタイルシート、 それが CSS (Cascading Style Sheet) です。

CSS は、 最初のバージョン (CSS1) が、 1996年12月に発表されました。 1997年には、 NN4 や IE3.02 が、 CSS のサポートを始めました。 1998年には、 5月に CSS2 が発表され、 一方、 IE4 で ほぼ満足のいく CSS1 サポートが実現しました。 ( 2000/4/10 追記: NN6 では、 ほぼ完全に CSS1 が実装されました。 )

CSS1 では、 自在にレイアウトの調整が出来る、 とまではいきませんが、 かなり自由度の高いレイアウトが可能です。
CSS2 になれば、 ページの設定 (しかも、見開きの右と左で、 レイアウトを変えられる!) どころか、 読み上げ音声の質やピッチまで制御できます。

ようやく、 HTML には、 本来の HTML の役割に戻ってもらえる時代が、 やってきたようです。


CSS を使ったサンプル

このページも、 CSS を使っています。

まずは、このページの HTML のソースコードをご覧になってください。 どうですか? 見栄えの割には、すっきりしたソースになっていると思います。 (JIS コードで書いています。 いったんダウンロードしてから、 JIS コードを認識できるエディタなどで読みこんでください。)

もっとも、 CSS に対応していない Webブラウザでは、 まるでつまらない見栄えのままです。 しかし、 文章の内容を把握するには、 なにも困らないでしょう。 文章の構造を示すために、 <h1> などのタグを本来の意味で使ってあるからです。

そして、 このページの見栄えを決めている CSS ファイルは、 cafe.css (NN4対応部分)cafe-ie.css (NN4非対応部分) です。 これも単なるテキストファイルですから、 ダウンロードしてご覧になってください。


参考

文献
  • スタイルシート Web デザイン - CSS2 完全解説 -
    著者:すみけんたろう, ISBN4-7741-0622-4, 1980円+税, 技術評論社
URL

Tips

IE4 で ユーザースタイルシートを使う

NN や IE を使っていて、 行間が狭くて読みにくい〜 と、 思ったことはありませんか? 上にも述べたように、 IE4 では、 ユーザースタイルシート (これも CSS の規格です) を使うことで、 デフォルトの設定を変えることができます。 (正確には、 Webブラウザが持っているスタイルシートより、 ユーザーの設定したスタイルシートが優先する、 ということなのですが。)

IE4 で、 デフォルト行間を変更するには、 まず、 ノートパッド等で、 次のように書きます。

body{
   line-height: 1.4;
}

これに default.css というファイル名を付けて、 保存しておいてください。

次に、 IE4 を立ち上げ、 メニューから、 [表示] - [インターネットオプション...] を、 選択します。 そのダイアログの [全般] タブの、 右下にある [ユーザー補助...] というボタンを、 クリックしてください。 このダイアログの最下段、 「ユーザースタイルシート」 の次の行、 [自分のスタイルシートでドキュメントの書式を設定する] に、 チェックを付け、 その右下の [参照] ボタンを、 クリックし、 先程作成した default.css を指定します。 あとは、 [OK] ボタンを順にクリックして、 設定を終わってください。

ちなみに、 default.css に、

h1{
   color: red;
}

と記述してやれば、 デフォルトで、 <h1>赤い文字で表示されるようになります。 (^^;

なお、 ユーザースタイルシートは、 ページの作者のスタイルシートには負けます。 また、 HTML 内で直接指定されているスタイルにも負けてしまうようです。