Start 目次 索引 用語集 色見本 対応表 Home
はじめに 記述方法 フォント テキスト 色＆背景 ボックス 体裁 テーブル 内容生成 UI ページ 音声

カスケード処理

↑ ＿ ▼ ↓
スタイルシートには次の3つの出所がある。CSSでは次の順に優先度が高く、この優先度順に適用される。
  1. 文書作成者（author）
    文書作成者が指定したスタイルシート。
  2. ユーザ（user）
    各ユーザが指定したスタイルシート。
  3. UA（User Agent）
    各UAが適用するデフォルトスタイルシート。（→HTML4.01で推奨されているデフォルトスタイルシート）

カスケード処理の順序

UAは各要素に適用する宣言を見つけ出すために以下の順にソートを実行する。
  1. 対象のメディアタイプに応じて適用する宣言を見つけ出し、セレクタとマッチした要素に宣言を適用する。
  2. 優先度により宣言をソートする。!important規則が適用された宣言は通常の宣言より優先され、更に、ユーザが!important規則を適用するとユーザの宣言が文書作成者の宣言より優先される。ユーザ、文書作成者共に!important規則を適用した場合、ユーザの宣言が文書作成者の宣言より優先される。また、@import規則により取り込まれたスタイルシートは@import規則が存在するスタイルシートと同じ出所として扱われる。
  3. より詳細度が高い順にセレクタをソートする。詳細度は以下のように算出する。
    1. セレクタ内のIDセレクタを数え上げ、その数を「a」とする。
    2. セレクタ内の属性、擬似クラスを数え上げ、その数を「b」とする。
    3. セレクタ内の要素を数え上げ、その数を「c」とする。
    4. 擬似要素は無視する。
    5. これら3つの数を並べた「abc」が詳細度となる。
  4. 全く同じ優先度、詳細度の場合、より後の位置で指定されたものを適用する。

ボックス

↑ ▲ ▼ ↓
構造化言語の各要素はBox（ボックス）と呼ばれる四角い領域を生成する。ボックスは下の4つの部分から構成されている。
Boxの構造
（注）表要素には存在しない。

ボーダーの競合

ボーダーの種類を指定するプロパティを用いてある要素に指定したボーダーが他の要素のボーダーと重なり合う場合、以下の規則に従い競合を解決する。
  1. 値「hidden」は最優先される。
  2. 値「none」は最も優先度が低く、他の値が競合するボーダーに指定されていた場合、そちらが優先される。
  3. より幅が太いボーダーが優先される。お互い同じ幅である場合、ボーダーの種類により値「double」、「solid」、「dashed」、「dotted」、「ridge」、「outset」、「groove」、「inset」の順に優先される。
  4. ボーダーの幅も種類も同じで色だけが異なる場合、指定した要素により優先度が決まり、表関連の要素においては表のセル、行要素、行グループ、列要素、列グループ、表要素の順に優先される。

マージンの相殺

相互に隣り合っているボックスや入れ子関係にあるボックス間において、間にパディングもしくはボーダーを挟まずに隣接するマージン同士は結合して1つのマージンになる事がある。詳細は以下のようになっている。
  • 水平方向のマージンは相殺されない。
  • 垂直方向のマージンにおいては、
    • positionプロパティによって絶対配置及び相対配置したボックスにおいてはマージンは相殺されない。
    • 浮動ボックスとその他のボックスとの間ではマージンは相殺されない。
    • 通常フローのブロックレベル要素のボックス間においては相殺が行われ、隣接するマージンの最大値が相殺後のマージン幅として用いられる。正負の値が混在している場合、最大値と最小値を足し合わせた値がマージン幅として用いられる。正の値が存在しない場合、隣接するマージンの最小値がマージン幅として用いられる。

メディアタイプ

↑ ▲ ▼ ↓
CSSでは以下の値で出力するメディアタイプを指定する事ができる。値の大文字・小文字は区別しない。指定方法としてはスタイルシート内で@media規則または、@import規則を用いて指定する方法と、構造化言語内で指定する方法（例えばHTMLではlink要素のmedia属性で）がある。
all
すべてのメディアにあてはまる。
aural
音声による出力を行うメディア。
braille
点字を出力するメディア。
embossed
点字をプリントするメディア。
handheld
携帯用のメディア。
print
プリントする装置。
projection
映写機などの投影装置。
screen
コンピュータの画面。
tty
グリッド線などにより文字幅が固定されているメディア。
tv
テレビ。

メディアグループ

プロパティの中には特定のメディアタイプ向けのものもある。各プロパティはそれぞれ以下に示すメディアグループに属している。
メディアグループとメディアタイプの対応関係
メディアタイプメディアグループ
continuous/pagedvisual/aural/tactilegrid/bitmapinteractive/static
auralcontinuousauralN/Aboth
braillecontinuoustactilegridboth
embosspagedtactilegridboth
handheldbothvisualbothboth
printpagedvisualbitmapstatic
projectionpagedvisualbitmapstatic
screencontinuousvisualbitmapboth
ttycontinuousvisualgridboth
tvbothvisual, auralbitmapboth
「both」という表記はそのプロパティが両方のメディアグループに適用される事を、「N/A」という表記はそのプロパティがパーセント値を受け付けないことを示す。また、すべてのメディアタイプに対応したプロパティをメディアグループで「all」と表す。
例えばメディアグループ「visual」に属するプロパティであればそれは、「handheld」「print」「projection」「screen」「tty」「tv」向けのプロパティという事になる。

継承

↑ ▲ ▼ ↓
プロパティの中には指定された値を子要素にも受け継ぐものがある。その多くは算出値を継承する値として用いるが指定値を継承するプロパティもある。
また各プロパティは値として「inherit」という値をとる事ができる。これを値として指定する事により親要素と同じ算出値をとる事ができる。

値「auto」について

↑ ▲ ＿ ↓
値「auto」の算出値はそれが指定された要素によって以下のようになる。

水平方向（width、margin-left、margin-right、left、rightプロパティ）

↑ ＿ ▼ ↓

垂直方向（height、margin-top、margin-bottom、top、bottomプロパティ）

↑ ▲ ＿ ↓
はじめに →Next
Start 目次 索引 用語集 色見本 対応表 Home
はじめに 記述方法 フォント テキスト 色＆背景 ボックス 体裁 テーブル 内容生成 UI ページ 音声