next up previous index
Next: 6. リンク Up: HTML文書作成マニュアル Ver 5.11 Previous: 4.10 ブロックテキスト


5. スタイルシート

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つのアトリビュートが使われています。

type
type="MIME type"の形で、このタグで使用するMIMEタイプを指定します。スタイルシートの場合、text/cssが値となります。
style
style="cdata"の形で、スタイルを定義します。スタイル定義は、スタイル名: スタイル値の組み合わせで、複数の定義の区切りには;(セミコロン)を使います。

スタイル名やその値の詳細については、スタイルシートの仕様定義を行っているW3Cのサイト内にあるドキュメントCascading Style Sheets Level1Cascading Style Sheets Level2 を参照してください。

次に、主に使われそうなスタイル定義を挙げておきましょう。

font-weight
フォントの太さを指定します。値としてplainboldなどがあります。
font-size
フォントのサイズを指定します。ポイントの場合、ptが単位です。smalllarge、それに%(パーセンテージ)といった相対指定によるサイズ指定も可能です。
font-family
フォントの名前を指定します。helveticaやtextttcourierなどがあります。
color
文字色を指定します。値の形式は7 を参照してください。
background-color
背景色を指定します。値の形式は7 を参照してください。
background-image
背景に貼る画像ファイルのURIを指定します。
cue-before
URIで指定した音をドキュメントを開く前に鳴らします。
cue-after
URIで指定した音をドキュメントを開いた後に鳴らします。

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>

style[Strict][Transitional]
<style attributes...>〜</style>はスタイルシートの定義を行います。使い方の詳細は5 を参照してください。attributesには次のようなものがあります。
dir
[Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
lang
[Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
media
[Strict][Transitional][省略可]media="cdata-list"は効果対象を指定します。値には次のようなものがあります。複数の値を指定する場合、,(コンマ)で区切ります。
all
すべてのデバイスが対象となります。
aural
音声出力装置(シンセサイザー)が対象となります。
braille
点字デバイスが対象となります。
handheld
携帯端末が対象となります。
print
ページ化された出力(通常は紙)が対象となります。
projection
プロジェクタが対象となります。
screen
コンピュータ画面が対象となります。
tty
コンピュータ画面(文字端末)が対象となります。
tv
テレビ装置が対象となります。
title
[Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。
type
[Strict][Transitional][必須]type="cdata"は、スタイルシート言語のMIMEタイプを指定します。CSS(Cascading Style Sheet)ならば、text/cssになります。

宣言されたスタイルを参照するには、タグのアトリビュートclass を使用します。次の例において、最初のpタグではIDp-blueのスタイルシートが採用され、後のpタグではスタイルシートは採用されません。


<p class="p-blue">
簡単なスタイルシートのテストです。
</p>
<p>
簡単なスタイルシートのテストです。
</p>

スタイルシートは確かに便利なもので、ページの作成者側のレイアウトイメージをそのままの形で提供できるというメリットがあります。しかし、見ばえにこだわるのは避けたほうがよいでしょう。あなたが1280x1024の高解像度で作成したページを640x480の低解像度の画面で見ているユーザーもいます。モノクロのディスプレイで見ている人もいます。Windowsのフォント名を指定してもそのようなフォントが存在しないUNIXやMacintoshの環境でブラウズしているユーザーもいます。

本当に大事なものは見ばえではなく、コンテンツ(内容)であることに注意し、重点を置きましょう。



Kenshi Muto
平成11年9月19日