とほほのスタイルシート入門(概要)

とほほのWWW入門 > とほほのスタイルシート入門 > 概要
2000年7月23日版

スタイルシートとは？

スタイルシートとは、WEBページ上の「見栄え」を定義するための新しい技術です。「HTMLは本来文書の意味だけを定義するべきで、文書の見栄えは定義するべきではない。見栄えはHTMLではなく、スタイルシートで記述しよう」というのが開発の理由です。

HTMLの標準化を進めるW3Cが1996年12月にCSS1(Cascading Style Sheets, Level 1)を勧告し、IE(Internet Explorer)3.0とNN(Netscape Navigator)4.0がでこれの一部機能を(中途半端に)サポートしました。また、両者はこのスタイルシートとJavaScriptなどを組み合わせ、ダイナミックHTMLという技術にまとめ、公開しています。(→「とほほのダイナミックHTML入門」)

ここでは、W3C勧告のCSS1を中心に、まだ標準化の完了していない「ポジショニング」や、IE4.0独自仕様の「フィルタ」などをあわせて説明していきます。詳細の仕様に関しては下記のサイトを参照してください。

CSS1の仕様書(W3C勧告)
http://www.w3.org/pub/WWW/TR/REC-CSS1
CSS2の仕様書(W3C勧告)
http://www.w3.org/pub/WWW/TR/REC-CSS2
CSS1仕様書の日本語訳(FXIS)
http://www.fxis.co.jp/DMS/sgml/css1.html
Positioning(W3Cワーキングドラフト)
http://www.w3.org/pub/WWW/TR/WD-positioning
Super Style Sheets Reference(ZSPCさん)
http://www.zspc.com/

スタイルシートの基礎

最も簡単なスタイルシートは次のように指定します。<SPAN>はインライン要素（前後で改行されない）、<DIV>はブロック要素（前後で改行される）を囲む一般的なタグとして使用されます。 
    <SPAN STYLE="color:red">あいうえお</SPAN>
    <DIV STYLE="color:red">あいうえお</DIV>
<SPAN>や<DIV>に限らず、<H1>や<P>など、ほとんどのタグでもSTYLE属性を指定できます。 
    <P STYLE="color:red">あいうえお</P>
すべての<H1>タグにスタイルを指定するのは面倒なので、これをまとめて行うことができます。次の例は、すべての<H1>タグ全てにSTYLE="color: red"を指定したことになります。 
    <HTML>
    <HEAD>
    <TITLE>Style Sheet Sample</TITLE>
    <STYLE TYPE="text/css">
    <!--
    H1 { color:red; }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>あいうえお</H1>
    <H1>かきくけこ</H1>
    </BODY>
    </HTML>
スタイルシートに対応していないブラウザのために<!-- 〜 -->でコメントアウトしておきましょう。JavaScriptとは異なり、--> の前に // を記述してはなりません。

タグと要素とセレクタ

H1 { color:red; } を「H1タグにスタイルを指定する」と呼ぶと、「用語の使い方が間違っとる!!」と怒る人がいるので注意しましょう。（私も怒られました。）上記の例で、それぞれの部分の呼び名は次のようになります。 要素(element)については、下の図のそれぞれの枠が要素だと思ってください。BODY要素は開始タグも終了タグも（実は）省略可能なのですが、たとえタグが省略されていても、<H1>〜</H1> や <P>〜</P> はBODY要素の一部であることに変わりありません。

<HTML>
<HEAD>
<TITLE>〜</TITLE>
</HEAD>

<BODY>
<H1>〜</H1>
<P>〜</P>
</BODY>
</HTML>

グルーピング

カンマ（,）を用いて、H1要素、H2要素の属性を一度に指定することができます。 
    H1, H2 { color:red; }
また、セミコロン（;）で区切って、H1要素に対して複数の属性値を一度に指定することもできます。最後の属性値のセミコロンは省略することができます。改行は行っても行わなくてもかまいません。 
    H1 {
        color:red;
        background:yellow
    }

継承

ある要素が、別の要素に含まれる時、その属性が継承されることがあります。例えば、H1 { color:red; } と定義されている時、H1要素の color:red の属性がEM要素にも継承されて、「いいい」の部分も赤くなります。 
    <H1>あああ<EM>いいい</EM>ううう</H1>

クラス

各タグ名に応じたクラスを定義することもできます。次の例は<P>タグでredクラスやgreenクラスを使用することを可能にします。 
    <HTML>
    <HEAD>
    <TITLE>テスト</TITLE>
    <STYLE TYPE="text/css">
    <!--
    P.red   { color:red; }
    P.green { color:green; }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <P CLASS=red>これはredクラスです。</P>
    <P CLASS=green>これはgreenクラスです。</P>
    </BODY>
    </HTML>
タグ名に依存しないクラス名を指定することもできます。 
    .red { color:red; }

    <H1 CLASS=red>これはredクラスです。</H1>
    <P CLASS=red>これもredクラスです。</P>
IE5.0以降では、複数のクラスを重複して指定することができます。 
    .red { color:red; }
    .bold { font-weight:bold; }

    <SPAN CLASS="red bold">赤い太字</SPAN>

定義済みクラス

A要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド( . )ではなくコロン( : )で指定します。link, visited, activeはそれぞれ、通常のリンク、読み込み済みのリンク、クリックされた瞬間のリンクの状態を示します。hoverはIE4.0でサポートされたもので、マウスをその上に乗せた時のスタイルを指定します。 
    A:link { color:green; }
    A:visited { color:blue; }
    A:active { color:red; }
    A:hover { color:red; }     /* IEのみ */
その他にも次の定義済みクラスがあります。first-lineは最初の1行を、first-letterは最初の1文字を示しますが、IE3.0, NN4.0共にまともには使えないようです。 
    P:first-line { color:red; }
    P:first-letter { font-size:200%; }

ID属性

クラスの代わりにIDを指定することもできます。クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能ですが、IDはそれぞれの要素につける名前で、ひとつのドキュメント中に、複数の要素が同じIDを持つことは許されません。 
    #elm123 { color:red; }
    H1#elm124 { color:green; }

    <SPAN ID=elm123>あいうえお</SPAN>
    <H1 ID=elm124>かきくけこ</H1>

状況依存セレクタ

<H1>〜</H1>の中で使用される場合のみの、<EM>要素のスタイルを指定することができます。カンマ( , )が無いことに注意してください。 
    H1 EM { color:red; }

    <H1>あああ<EM>いいい</EM>ううう</H1>
次の例は、第1レベルの<LI>は青色で、第2レベルの<LI>は緑色で表示するようになります。IE3.0では正常に動作しますが、NN4.0では文頭の黒丸( ・ )しか色が変化しませんでした。残念。 
    UL LI { color:blue; }
    UL UL LI { color:green; }

コメント

/* と */ の間はコメントとして無視されます。 
    H1 { color:red; }    /* Red Color */

優先順位

重複定義の優先順位をつけるために、important属性も定義されていますが、IE3.0, NN4.0共に未サポートのようです。 
    H1 { color:red ! important }

スタイルシートを外部ファイルで定義する

スタイルシートの定義部を他のファイルから読み込む事ができます。こうすることにより、複数の文書でスタイルシートを共有することができます。 
    <HTML>
    <HEAD>
    <TITLE>Style Sheet Test</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
    HREF="http://abc.com/xxx.css" TITLE="XXX">
    </HEAD>
読み込むファイルには、スタイルシートの部分のみを記述します。<STYLE><!-- や --></STYLE>は記述しません。 
    H1 { color:red; }
別のフォルダにあるスタイルシートファイルを読み込むときは注意が必要です。スタイルシートファイルから参照する背景画像などのファイルのパスが、IEではスタイルシートファイルのフォルダを起点とするのに対し、NN4.*ではHTMLドキュメントのフォルダを起点としてしまうようです。

<LINK>で指定するファイルの他に、インポートスタイルシートという方法も定義されています。しかしIE3.0では未サポートのようです。NN4.0で実験するとブラウザがだんまり状態になってしまい、Alt+Ctrl+DelのタスクリストからNetscapeを終了させなくてはならない状況になってしまいました。 

    <STYLE TYPE="text/css">
    @import url(http://abc.xyz.com/common.style);
    </STYLE>

スタイルシートのメリット

スタイルシートを使用することのメリットには次のようなものがあります。

見栄えを一度に指定できる：
すべてのH1要素に<FONT COLOR=red>〜</FONT>を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。

見栄えを一度に変更できる：
見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。春には春のスタイルを、秋には秋のスタイルを適用してやることもできます。この時、CLASS=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、CLASS=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。

自分の好きな見栄えに変更できる：
IEでは、[インターネットオプション] → [ユーザ補助] → [ユーザースタイルシート] で、人のページに自分の好きなスタイルシートファイルを適用することができます。黒地に白文字が好きな人や、大きな字で読みたい人も、自分の好みのスタイルを適用することができます。

見栄えと意味を分離しちゃおう：
Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。

スタイルシートの注意点

上記のように、使いこなすと便利なスタイルシートですが、いろいろ問題もあります。

未対応のブラウザもある：
NN3.0 や、その他多くのブラウザはまだスタイルシートをサポートしていません。また、いろいろな理由からスタイルシート機能をオフにしている人も居ます。意味だけでなく、見栄えも大切にするページであれば、古いブラウザへの配慮も必要です。

ブラウザによって動作が異なる：
IEとNNで動作が異なります。同じブラウザでもバージョンやWindows版とMacintosh版でも動作や見栄えが異なります。

ひどい実装のブラウザが多い：
IE4.0やIE5.0で確認しながら、スタイルシートを駆使したページを IE3.0 や NN4.0 で見ると、大半の人が愕然とするでしょう。IE3.0 や NN4.0 にはスタイルシートに関する大量のバグがあるので、ひどい時は文章と文章が重なってしまって、読むことすらできなくなります。

保存すると見栄えが・・・：
ページを自分のハードディスクに保存して、後から見る人も多いと思いますが、スタイルシートの外部ファイルの保存を忘れてしまうと、せっかくの見栄えが台無し（読みづらいページ）になってしまうことがあります。

ブラウザのバグや実装の違い

私が知っているだけでも、現状のブラウザ（IE4.0/NN4.0）には、以下のような問題があるようです。

NNではBODY属性がテーブルに継承されない：
BODY { color: red }と指定した場合、IEでは期待通り同様の動作をしますが、NNではテーブルの中身の文字が変化しません。BODY, TH, TD { color: red }と指定するようにしましょう。

間隔の差異：
P { margin-left:30; margin-right:30 }なんてのはよく使用するパターンだと思いますが、これを用いたページをIE3.0で表示すると、妙に上下の間隔がいびつ(<H4>のタイトルが前の段落側に寄ってしまう)なページになってしまいました。

単位の差異：
フォントサイズの指定も、NNとIEで異なります。NNではpx以外はすべて、ブラウザで指定したフォントサイズに依存するのに対して、IEではすべてのフォントがブラウザのフォントサイズに依存しません。IEで正常に見えるフォントが、NNでは小さすぎて読めなかったりします。

line-heightもひどい：
line-heightを用いて行間隔をあけると、文章を読みやすくなりますが、line-height指定と<TABLE>の混在するページをIE3.0で表示すると、ページのレイアウトが無茶苦茶に崩れてしまいました。

フィルタ(filter:)はまだまだ推奨できない：
IE4.0でサポートされたフィルタは大変魅力的なスタイルですが、フィルタを使用したページを表示するには非常に多くのメモリとCPUを消費します。表示が遅いだけならまだしも、スクロールするのでさえ重いです。ちょっと古いCPUのマシンだと、フィルタを使用したページには耐えれないようです。また、NN4.0でフィルタを利用したページを表示すると、単にフィルタを無視するかと思えば、ページ全体のレイアウトが無茶苦茶に崩れてしまいました。

NN4.0でレイヤ中でSTYLEを使用できない：
NN4.0で<LAYER>または<ILAYER>で囲まれたタグにSTYLE属性を指定すると、それ以降のスタイルシートが無効化されるというバグがあります。STYLE属性ではなく、CLASS属性で指定すると回避できるようです。(2000.1.9追記)

他にもまだまだ、いろいろなバグがあります。特にNetscape 4.*での実装はひどいので、Netscapeでも正常に表示されることをちゃんと確認しましょう。確認を怠ると、Netscapeではうまく表示できていることのほうが少ないくらいです。

とにかく・・・まだまだ現時点では、スタイルシートを使用するのは、それなりのリスクを負うことを覚悟する必要がありそうです。

アクセシビリティ

W3Cがスタイルシートを開発した理由の一つに、アクセシビリティというものがあります。目の見えない人にも正確に意味を伝える、視力の弱い人が特大のフォントで読むことを可能にする、マウスの使えない人にもキーボードでの操作を可能にする、などなど。

スタイルシートのメリットや、このアクセシビリティの思想に感動して、「これからは全員スタイルシートだっ!」とばかり、スタイルシートを使用することを人におしつけてしまう人をたまに見ます。「スタイルシートを使うと、Netscapeでまともに見れないから・・・」というと、「W3Cの標準なんだから従うべきだ。Netscapeなんか使っている方が悪い。」とまで言う人もいるようです。

しかし、UNIX端末しかなくてNetscapeしか使えない人も居ます。意味よりも見栄えが大事な場合もあります。「目に優しい」を考慮しなくてはならない場合もあります。標準に従うことよりも、できるだけ多くのブラウザに対応することが大事な場合もあります。

W3Cの仕様書に定義されているから・・・ではなく、それぞれ一人一人が、自分の考えで、スタイルシートを使う、使わないを考え、自分のホームページを作成して欲しいと思います。（・・・ってなことを書くと、また怒られそうだな^^;）

Copyright (C) 1997-2000 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwcss1.htm