css2の裏の裏

６．値の割り当て、カスケード処理、継承

この章で説明する内容は、本来スタイルシートで一番重要な概念ですが、説明も難しいです。

6-1.値の割り当て

プロパティに入力する値の定義で、次のように指定値、算出値、実行値があります。

  1. 指定値(Specified values)
    カスケード処理によって値が決まる場合はそれを指定値として使いますす。
    カスケード処理で値が決まらない場合で、プロパティが継承される場合、親要素の値が用いられます。
    指定がなければ、そのプロパティの初期値となります。初期値としては、たとえばHTML4.0のデフォルトのスタイルシートの値をとるブラウザがあります。
  2. 算出値(Computes values)
    指定値がemや％のように相対的な定義の時に値は計算によって算出され、算出値となります。
  3. 実効値(Actual values)
    システムが表示できる値で、たとえば font-size:11pt　と定義したとき、システムが11ptのフォントを持っていない場合は、ブラウザはたとえば10ptや12ptなど実際に表示できる値に計算しなおされます。

6-2.継承（Inheritance）

スタイルシートでは、要素間が親子関係にあって、子の要素のプロパティ値が指定されていない場合、親の値が子の値に引き継がれるのが一般的である。

例として次の定義を考えます。

BODY { font-size: 10pt }
H1 { font-size: 120% }

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

H1要素の'font-size'は'12pt'（親要素の値10ptの120%分）という算出値を取ります。 'font-size'は算出値を継承するので、EM要素も同様に'12pt'という算出値を取ることになります。もし12ptのフォントが手に入らない場合、H1要素とEM要素の両者について、'font-size'の実効値はたとえば'11pt'になります。

6-3.@import規則（The @import rule）

他のスタイルシートから規則をインポート（輸入）します。

設置例は次のようにSTYLE要素で定義します。セミコロン;を忘れないように注意しましょう。

<style type="text/css">
    @import "style.css";
</style>

テストページをブラウザ間でチェックしましたところ、IE5.xやNetscape6.xでは実装されていましたが、NC4.xxは実装されていませんでした。

これを逆手に取れば、LINK要素やSTYLE要素でのスタイル定義は必要最小限にとどめNC4.xxでも見栄えが実現するようにしておき、CSS2を十分に発揮したい定義のみをimport規則を用いると良いことがわかります。

最初からimport規則のみでCSSを定義すればそんな面倒なことはしなくていいんですが、それはスタイルシートの裏の裏の基本構想からはずれます。

6-4.カスケード処理

この部分はCSS2訳からそのまま引用しました。

  1. 文書作成者
    文書作成者は構造化言語の約束に従ってソース文書にスタイルシートを指定する。たとえばHTMLでは、スタイルシートを文書内に埋め込んだり、あるいは文書外部のスタイルシートにリンクしたりできる。
  2. ユーザー
    ユーザーがある特定の文書に対してスタイル情報を指定できる場合がある。たとえば、ユーザーがスタイルシートを含むファイルを指定できる場合や、ユーザエージェントがユーザに対してスタイルシートを生成するインタフェースを供給する（あるいはそうであるかの様に動作する）場合もある。
  3. ユーザエージェント
    適合ユーザエージェントは、他のどのスタイルシートよりも先にまずデフォルトスタイルシート（default style sheet）を適用しなければならない（あるいはそうであるかの様に動作しなければならない）。ユーザエージェントのデフォルトスタイルシートは、体裁に対する構造化言語の一般的意図を満たす様に（たとえばHTMLのEM要素が斜体字になる様に）すべきである。 [HTML40]文書で推奨されているデフォルトのスタイルシートについては[A HTML4.0におけるスタイルシートの例]を参照のこと。

スタイルシートを定義するのは上記３者で、CSSの定義が競合するときにその優先順位を決めるのがカスケード処理と呼ばれるものです。

（1）カスケード処理の順序

カスケード処理による優先順位のつけかたは次のとおり。

  1. メディアタイプと合致するものを優先する
  2. 優先度及び出所による順位づけ
  3. 詳細度による順位づけ
  4. 指定された順序による順位付け

最重要規則（!important rules）

スタイルシートによる見栄えを100％HTML作成者が決定するようにしてしまうと、ユーザーによっては不都合が生じる場合がある。たとえば、色弱の人はよりコントラストの高い見栄えが必要だろうし、近眼の人にはある程度大きな文字サイズの見栄えが必要になってくる。

これを補うのが最重要規則であって、ユーザーの定義するスタイルシートに最重要規則を盛り込んでおけば、他の全てのスタイルシートの定義（文書作成者の最重要規則）よりも優先させることができる。

ユーザースタイルシートを有効にする方法は、ブラウザの設定例のページで図を用いて説明しています。

（2）詳細度（specificity）

CSS1では詳細度（specificity）を求める計算式は明記されておらず、例題から次の計算式を導いていました。

specificity= (ID属性の数)*100 + (クラス属性の数)*10 + (要素名の数)*1

CSS2では、次のような計算式が明記されています。

specificityは(ID属性の数)をα、(クラス属性の数)をβ、(要素名の数)をγとしたとき、それをαβγと並べて数値とする。ただし、十分大きな基数を用いるものとする。また擬似要素は無視する。

基数が十分大きいとは10進数の概念から離れろということで、次の2つの例では、要素名11個の定義よりもクラス属性1つだけのほうが詳細度は大きくなることがわかります。

/* 例１*/  .example { color : red }
/* 例２*/  p p p em strong p p p em strong p { color : blue }

Index