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

HOME > とほほのWWW入門 > とほほのスタイルシート入門 > 概要
1998年5月31日版

はじめに

ここで紹介するスタイルシートは、W3C(http://www.w3.org/)によって勧告されている「Cascading Style Sheets, Level 1」、俗に「CSS1」と呼ばれているものです。詳しくは下記のドキュメントを参照してください。

  ・ http://www.w3.org/pub/WWW/TR/REC-CSS1
     W3Cによる勧告仕様。
  ・ http://www.fxis.co.jp/DMS/sgml/css1.html
     その日本語訳。
  ・ http://www.zspc.com/
     ZSPCさんの「Super Style Sheets Reference」

スタイルシートはIE3.0から、NN4.0からサポートされていますが、両者とも上記の仕様に完全に準拠している訳ではなく、一部未サポートだったりします。また、まだ仕様が確定していない「ポジショニング」や、IE4.0独自の「フィルタ」などのスタイルシートもありますので、これらもあわせて紹介していきます。

スタイルシートの基礎

最も簡単なスタイルシートは次のように指定します。<SPAN>はインライン要素、<DIV>はブロック要素として扱われます。
    <SPAN STYLE="color: red">あいうえお</SPAN>
    <DIV STYLE="color: red">あいうえお</DIV>
<H1>や<P>など、ほとんどのタグでもSTYLE属性を使用できます。
    <P STYLE="color: red">あいうえお</P>
各タグに対する標準スタイルを指定することもできます。次の例は<H1>というタグ全てにSTYLE="color: red"を指定したことになります。スタイルシートに対応していないブラウザのために<!-- -->でコメントアウトしておきましょう。
    <HTML>
    <HEAD>
    <TITLE>Style Sheet Sample</TITLE>
    <STYLE TYPE="text/css">
    <!--
    H1 { color: red }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>あいうえお</H1>
    </BODY>
    </HTML>

複数タグへの一括指定

複数のタグに対して設定するにはカンマ( , )、複数の属性を設定するにはセミコロン( ; )を使用します。
    H1, H2 {
        color: red;
        background: yellow
    }

コメント

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

クラス

各タグにクラスを定義することもできます。 次の例は<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>

定義済みクラス

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

ID属性

クラスの代わりにIDを指定することもできます。
    #z98y { color: red }
    H1#z99y { color: green }

    <SPAN ID=z98y>あいうえお</SPAN>
    <H1 ID=z99y>かきくけこ</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 }

スタイルシートを他のファイルで定義する

スタイルシートの定義部を他のファイルから読み込む事ができます。
    <HTML>
    <HEAD>
    <TITLE>Style Sheet Test</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
      HREF="http://abc.com/style.css" TITLE="XxxxStyle">
    </HEAD>
インポートスタイルシートという方法も定義されています。 しかしIE3.0では未サポートのようです。 NN4.0で実験するとブラウザがだんまり状態になってしまい、Alt+Ctrl+DelのタスクリストからNetscapeを終了させなくてはならない状況になってしまいました。
    <STYLE TYPE="text/css">
    @import url(http://abc.xyz.com/common.style);
    </STYLE>

優先順位

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

スタイルシートの注意点

使いこなすと便利なスタイルシートですが、いろいろ問題点もあります。下記の点に注意してください。

スタイルシートをサポートしていないブラウザへの配慮: スタイルシートをサポートしていないブラウザや、スタイルシートの使用をオフにしているブラウザでも、正常に表示できるように考慮しなくてはなりません。必ず、ブラウザの「スタイルシートを使用する」をオフにして確認するようにしましょう。

ブラウザによって動作が異なる: IEとNNで動作が異なります。必ず、他のブラウザでも正常に表示されるか、確認するようにしましょう。以下に、私が気づいたいくつかの相違点を紹介します。

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

filter:がNNの表示を見出す: filter:はIE4.0のみがサポートしているスタイルなのですが、filter:を使用したページをNNで表示すると、ページ全体のレイアウトが無茶苦茶に崩れてしまうことがあります。

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

単位の差異: フォントサイズの指定も、NNとIEで異なります。NNではpx以外はすべて、ブラウザで指定したフォントサイズに依存するのに対して、IEではすべてのフォントがブラウザのフォントサイズに依存しません。

同様の差異はまだまだあると思います。とにかく、スタイルシートを用いた場合は、通常よりも念入りに、多種多バージョンのブラウザで確認することが大事なようです。


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )