スタイルシートノムスメ

見栄えにこだわったWebページをデザインする場合，スタイルシートを使わずに Webブラウザ依存の拡張仕様を使うとしたらどうしていたでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-2022-jp">
    <title>Style sheet sample 1</title>
  </head>
  <body>
    <h1>スタイルシートのサンプル</h1>
    <p>
      サンプル文書だよ．
      <strong>強調</strong>するぜ！
    </p>
  </body>
</html>

この文書を， 見出しは文字の色を赤にして目立たせようと思ったとします．

もしスタイルシートを使用しなければ，次のようにHTML文書を変更することと思います．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-2022-jp">
    <title>Style sheet sample 2</title>
  </head>
  <body>
    <h1><font color=red>スタイルシートのサンプル</font></h1>
    <p>
      サンプル文書だよ．
      <strong>強調</strong>するぜ！
    </p>
  </body>
</html>

これでとりあえず当初の目的は達成しましたが，これだけの変更で済むのは例としてあげた文書が小さいからです．もっと大きな文書の場合は当然見出しもいっぱいあるわけですから，その全ての見出しにこういった指定をすることになります．また，やっぱり，見出しの文字は別の色がいいなということで色を変更したい場合には，その全ての見出しの指定を変更しなければいけません．

どうして，単に全ての見出しを赤い色の文字で表示したいだけなのに，全ての見出しについていちいちこういった指定をしないといけないわけ?
はっきり言って，これは私には耐えられない作業です!

もちろん，世の中は人それぞれですから，全部の見出しの見えかたを指定するんだから，全部指定するのはあたりまえだろ．なーに単純作業を繰り返せばすむことじゃないか．オレはちゃんと全部指定してやるよ．なんて考えて，こういった機械的な作業に疑問を抱かない人もいるかもしれません．

そういった考えの人には，私から言えるのはこれだけです，
一生そんな単純作業を繰り返してください．
さよなら...

使用後

もし，私と同じように，こんな単純作業に疑問をもったり， Webブラウザに依存した機能を使用することに疑問をもったりしたら，スタイルシートの導入を検討すべきだと思います．

同じことをスタイルシートを使ってやったらどうなるでしょうか？まず，HTML文書は次のように変更します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-2022-jp">
    <title>Style sheet sample 3</title>
    <link REL=STYLESHEET type="text/css" href="sample3.css">
  </head>
  <body>
    <h1>スタイルシートのサンプル</h1>
    <p>
      サンプル文書だよ．
      <strong>強調</strong>するぜ！
    </p>
  </body>
</html>

最初の行のDOCTYPEの宣言を変更し， <link REL=STYLESHEET ... というのを追加しただけで，なんと本文はまったく変更なしです．

もちろん，これだけで見出しの文字の色が赤になるわけではなく， <link REL=STYLESHEET type="text/css" href="sample3.css"> のsample3.cssというファイルにその仕掛けがあるわけです．その内容は次のとおり．

h1 {
	color: red;
	font-size: 2em;
}
strong {
	font-size: 1.5em;
	background-color: red;
}

見ればだいたい想像がつくと思いますが， h1 { ... } というのは h1つまり見出しレベル1に関する指定です．ここで，color: red; つまり色は赤に， font-size: 2em; つまりフォントの大きさは通常の2倍という指定をしてるわけです．これだけで，全てのh1つまり見出しレベル1の内容はこの指定で表示されます．

例では，ついでにstrongつまり強調の指定もやってます． strong { ... }って部分ですね．ここで，フォントの大きさを通常の1.5倍， background-color: red;つまり背景を赤と指定しています．

どうですか？簡単でしょ？
このようにスタイルシートって簡単で便利なものなのです．

弱点

ちゃんとマークアップしてる？

まず，だいたい想像がついてたかもしれませんが，スタイルシートは，論理的なマークアップがされた文書においてその真価が発揮されるのです．ということは，論理的なマークアップがされていない文書はその恩恵を受けるのは困難だということです．

例えば，文書中のある部分を強調したいときに， strong(強調)を使わずに， h1(見出しレベル1)でマークアップしていたとします．そして，見出しを緑の文字で表示しようと思って h1に緑の文字を指定したら，その強調したかった部分まで見出しと同じ緑の文字になってしまうでしょう．これは，あきらかに論理的なマークアップを行っていないのが原因です．強調したい部分を見出しという間違ったものでマークアップした罰です．

もちろんほんとは， このようなことを弱点だというのはあんまりです． HTMLは本来論理的なマークアップをするためにあるので，それから逸脱したものについて考えるのはナンセンスです．

ブラウザの対応は？

次に， Webブラウザのサポートが不完全というのが弱点としてあげられます．これはかなり深刻な問題点です．なんたって， 本来どのように見えるべきなのかというのを知る術が無い わけです．

Netscape Navigator 4.0も Internet Exploder 4.0もスタイルシートに対応してることになってるみたいですが，それでも，え？なんでこんな風に表示されるの？と疑問を持ってしまうことがしばしばあります． W3Cの評価用Webブラウザである amayaは，スタイルシートについてはフルサポートではないようですし，日本語を表示できないという問題点もあります．

というわけで，この問題点については，早くちゃんとスタイルシートに対応したWebブラウザがリリースされるのを待つしかないようです．それまでは，心の目で見てください!

参考文献

すみけんリソース!のすみけんたろうさんによるスタイルシート Webデザインという本が技術評論社より出版されています．文系な人にはちょっとツライかもしれませんが，理系で言語定義に拒否反応をおこさない人にはお勧めです．でも，こういうのって本来文系の専門分野なのでは...?

スタイルシートの仕様については， W3Cの Cascading Style Sheets, level 1 という仕様書を参照ください． (英文ということで躊躇される方もあるかもしれませんが，その内容はかなり簡明で，中学生程度の英語力と辞書を引く能力があれば理解可能です，)

HTML 4.0の仕様書については，邦訳補完委員により HTML4.0仕様書邦訳計画が進められています．

スタイルシートノムスメ

使用前

使用後

弱点

ちゃんとマークアップしてる？

ブラウザの対応は？

参考文献