HTML4.0では、新しく「スタイルシート」18という概念が組み込まれています。これは、HTMLドキュメントのタグに対し、見ばえの設定をサーバー側から指定するものです。たとえば、p(4.5 参照)という段落を示すタグに対し、「フォントの大きさは12ポイント(pt)で色は青」という見ばえでブラウザ上に表示させたいとします。fontタグ(4.6 参照)でもこれは可能ですが、たとえば「すべてのpタグ」に対してこれを定義するのは非常に面倒です。
スタイルシートを使うことでこの問題は解決できます。また、コンテンツ(内容)とスタイル(見ばえ)を完全に分離することが可能になるため、コンテンツ作成者とスタイル作成者の分担を決めたり、サイト内のページ全体で統一感のある見ばえを設定したりすることができるようになります。
簡単な例からいきましょう。fontタグでもできますが、先程のフォントの大きさは12ポイントで色は青」を1つのpタグに設定します。
<p type="text/css" style="font-size: 12pt; color: blue"> 簡単なスタイルシートのテストです。 </p>
この結果は次のようになります。あなたのWebブラウザがスタイルシートに対応しているのであれば、フォントの大きさは12pt、色は青で文字が表示されていることでしょう。
簡単なスタイルシートのテストです。
この例では、2つのアトリビュートが使われています。
スタイル名やその値の詳細については、スタイルシートの仕様定義を行っているW3Cのサイト内にあるドキュメントCascading Style Sheets Level1やCascading Style Sheets Level2 を参照してください。
次に、主に使われそうなスタイル定義を挙げておきましょう。
URIを指定する場合、そのURIをurl(〜)で囲む必要があります。たとえばcue-before定義内でfanf.auを鳴らすときは、次のように指定します。
cue-before: url(fanf.au
ほかにもマージンを変更したり、行の高さを変えたり、といった複雑なスタイルの設定が可能です。
次に、すべてのpタグに同じスタイルを割り当てることを考えてみましょう。このようなときには、styleタグ(5 参照)でスタイルを宣言します。
<head>
<style type="text/css">
p {font-size: 12pt; color: blue}
</style>
</head>
これで、このドキュメント内のすべてのpタグに同一のスタイルが割り当てられます。
最後に、「いくつかのpタグだけ」にスタイルを割り当ててみます。もちろん、最初と同様、必要なタグにだけスタイル設定を行ってもよいのですが、より簡単な方法として、スタイルにIDを付け、使用したいタグでこのIDを参照する方法があります。
まず、styleタグ(5 参照)でスタイルを宣言します。このとき、タグ名の後ろに.を付け、この後にIDを宣言します。次の例の場合、pの後のp-blueがIDです。
<head>
<style type="text/css">
p.p-blue {font-size: 12pt; color: blue}
</style>
</head>
宣言されたスタイルを参照するには、タグのアトリビュートclass を使用します。次の例において、最初のpタグではIDp-blueのスタイルシートが採用され、後のpタグではスタイルシートは採用されません。
<p class="p-blue"> 簡単なスタイルシートのテストです。 </p> <p> 簡単なスタイルシートのテストです。 </p>
スタイルシートは確かに便利なもので、ページの作成者側のレイアウトイメージをそのままの形で提供できるというメリットがあります。しかし、見ばえにこだわるのは避けたほうがよいでしょう。あなたが1280x1024の高解像度で作成したページを640x480の低解像度の画面で見ているユーザーもいます。モノクロのディスプレイで見ている人もいます。Windowsのフォント名を指定してもそのようなフォントが存在しないUNIXやMacintoshの環境でブラウズしているユーザーもいます。
本当に大事なものは見ばえではなく、コンテンツ(内容)であることに注意し、重点を置きましょう。