概要
ドキュメントツリーを構築し、
ツリー内のすべての要素、
およびそれに応じて
フォーマット構造内の
すべてのボックスに
値を割り当てます。
利用者としてのポイントは、どの値がどう扱われるかを意識する事で、どう記述するべきかを知ることができます。
宣言値
各要素の各プロパティについて、要素に適用されるすべての宣言された値が収集されます。
これが宣言値で、要素に適用される宣言値は、ひとつもない時もあり複数存在する時もあります。
「要素に適用」とはセレクタによる紐づけとか、記述されたプロパティが既知のプロパティ名かなどです。
- <style>
- .cdvSample{ font-size: 16px; outline: 10em double; width: 5em; }
- </style>
- <div class="cdvSample" style=" outline: solid; color: Blue; ">要素Ａ
- <div style=" outline-width: inherit; outline-style: inherit; color: Red; width: 80%; ">要素Ｂ
- <div style=" outline-style: solid; outline-color: inherit; color: Blue; width: inherit; ">要素Ｃ</div></div>
- <span>要素Ｄ</span>
- </div>
要素Ａは div要素であり，class属性，style属性を持っています。
div要素，class属性，style属性 を示すセレクタは CSS で記述されていません。
class属性の属性値でクラスが指定されていて、クラスセレクタのその値は CSS で記述されています。
style属性の属性値で有効な CSS の宣言が記述されています。
尚 outline プロパティは一括指定プロパティなので、個別のプロパティに置き換えます。一括指定に於いて省略された値の扱いには個々に既定値があります。
- font-size:
.cdvSample: 16px; - outline-width:
.cdvSample: 10em;
style attribute: medium; - outline-style:
.cdvSample: double;
style attribute: solid; - outline-color:
.cdvSample: currentColor;
style attribute: currentColor; - color:
style attribute: Blue; - width:
.cdvSample: 5em;
要素Ｂは div要素であり，style属性を持っています。
div要素，style属性 を示すセレクタは CSS で記述されていません。
style属性の属性値で有効な CSS の宣言が記述されています。
尚 outline-width, outline-style は個別のプロパティなので outline-color に関しての記述はなく、outline-color の宣言値はありません。
- outline-width:
style attribute: inherit; - outline-style:
style attribute: inherit; - color:
style attribute: Red; - width:
style attribute: 80%;
要素Ｂは div要素であり，style属性を持っています。
div要素，style属性 を示すセレクタは CSS で記述されていません。
style属性の属性値で有効な CSS の宣言が記述されています。
- outline-style:
style attribute: solid; - outline-color:
style attribute: inherit; - color:
style attribute: Blue; - width:
style attribute: inherit;
要素Ｄは span要素であります。
span要素 を示すセレクタは CSS で記述されていません。
- 宣言値はない
カスケード値
カスケード値とは、宣言値を優先順位により選別したものです。
その宣言はまず起源，次に詳細度，最後に出現順で選別されます。
カスケード値は選別した物なので、宣言値がなければカスケード値もありません。
宣言値が複数存在した時には、カスケード値はひとつだけ存在します。
- font-size:
.cdvSample: 16px; - outline-width:
.cdvSample: 10em;
style attribute: medium; - outline-style:
.cdvSample: double;
style attribute: solid; - outline-color:
.cdvSample: currentColor;
style attribute: currentColor; - color:
style attribute: Blue; - width:
.cdvSample: 5em;
クラスセレクタよりインライン (style 属性) の方が詳細度は重いので、インラインの値が選択される。
インラインにない値はクラスセレクタより用いられる。
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: currentColor;
- color: Blue;
- width: 5em;
- outline-width:
style attribute: inherit; - outline-style:
style attribute: inherit; - color:
style attribute: Red; - width:
style attribute: 80%;
ひとつのプロパティにひとつの宣言値しかないので、そのままカスケード値とされる。
- outline-width: inherit;
- outline-style: inherit;
- color: Red;
- width: 80%;
- outline-style:
style attribute: solid; - outline-color:
style attribute: inherit; - color:
style attribute: Blue; - width:
style attribute: inherit;
- outline-style: solid;
- outline-color: inherit;
- color: Blue;
- width: inherit;
- 宣言値はない
- カスケード値はない
宣言の起源の優先順位
- 遷移宣言[css-transitions-1]
- 重要なユーザーエージェント宣言
- 重要なユーザー宣言
- 重要な著者の宣言
- アニメーション宣言[css-animations-1]
- 通常の著者宣言
- 通常のユーザー宣言
- 通常のユーザーエージェント宣言
指定値
指定値とは、カスケード値に既定値を補ったものです。
補う訳なので指定値は、全ての要素の全てのプロパティに存在します。
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: currentColor;
- color: Blue;
- width: 5em;
全てのプロパティは多いので、輪郭線に関しての outline-width，outline-style，outline-color と color, width, font-size で例示します。
要素Ａは outline-width，outline-style，outline-color, color, width, font-size のカスケード値はあるのでそのまま指定値となります。
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: currentColor;
- color: Blue;
- width: 5em;
- outline-width: inherit;
- outline-style: inherit;
- color: Red;
- width: 80%;
font-size のカスケード値がなく，継承プロパティなので、親要素(Ａ要素)の計算値 16px が指定されます。
outline-color のカスケード値がなく，非継承プロパティなので、初期値の currentColor が指定されます。
- font-size: 16px;
- outline-width: inherit;
- outline-style: inherit;
- outline-color: currentColor;
- color: Red;
- width: 80%;
- outline-style: solid;
- outline-color: inherit;
- color: Blue;
- width: inherit;
font-size のカスケード値がなく，継承プロパティなので、親要素(Ｂ要素)の計算値 16px が指定されます。
outline-width のカスケード値がなく，非継承プロパティなので、初期値の medium が指定されます。
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: inherit;
- color: Blue;
- width: inherit;
- カスケード値はない
font-size のカスケード値がなく，継承プロパティなので、親要素(Ａ要素)の計算値 16px が指定されます。
outline-width のカスケード値がなく，非継承プロパティなので、初期値の medium が指定されます。
outline-style のカスケード値がなく，非継承プロパティなので、初期値の none が指定されます。
outline-color のカスケード値がなく，非継承プロパティなので、初期値の currentColor が指定されます。
color のカスケード値がなく，継承プロパティなので、親要素(Ａ要素)の計算値 #0000ff が指定されます。
width のカスケード値がなく，非継承プロパティなので、初期値の auto が指定されます。
- font-size: 16px;
- outline-width: medium;
- outline-style: none;
- outline-color: currentColor;
- color: #0000ff;
- width: auto;
計算値
計算値とは、ドキュメントをレイアウトしたりすることなく相対的な値を絶対的な値に計算したものです。
1em などが該当し、レイアウトが必要なものに対する割合 10% などは該当しません。
font-size: 90%; の様なレイアウトが不要なものに対する割合は該当します。
継承の対象となる値は、宣言値ではなくてこの計算値です。
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: currentColor;
- color: Blue;
- width: 5em;
medium を 3px として例示しています。(ユーザーエージェントに依存する為、ブラウザなど環境によって違う事もあります。)
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #0000ff;
- width: 80px;
- font-size: 16px;
- outline-width: inherit;
- outline-style: inherit;
- outline-color: currentColor;
- color: Red;
- width: 80%;
inherit(継承)は、親要素(Ａ要素)の計算値が指定されます。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #ff0000;
- width: 80%;
- font-size: 16px;
- outline-width: medium;
- outline-style: solid;
- outline-color: inherit;
- color: Blue;
- width: inherit;
inherit(継承)は、親要素(Ｂ要素)の計算値が指定されます。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #0000ff;
- width: 80%;
- font-size: 16px;
- outline-width: medium;
- outline-style: none;
- outline-color: currentColor;
- color: #0000ff;
- width: auto;
outline-style が none の為、 outline-width の計算値は 0 となります。
- font-size: 16px;
- outline-width: 0;
- outline-style: none;
- outline-color: currentColor;
- color: #0000ff;
- width: auto;
使用値
使用値とは、計算値を基にドキュメントをレイアウトするなど実際に使用する絶対的な理論値です。
プロパティがこの要素に適用されない場合、要素にはそのプロパティの使用値はありません。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #0000ff;
- width: 80px;
currentColor を置き換えます。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: #0000ff;
- color: #0000ff;
- width: 80px;
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #ff0000;
- width: 80%;
width: 80% は、親要素(Ａ要素)の値を基に計算して使用値が指定されます。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: #ff0000;
- color: #ff0000;
- width: 64px;
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: currentColor;
- color: #0000ff;
- width: 80%;
width: 80% は、親要素(Ｂ要素)の値を基に計算して使用値が指定されます。
- font-size: 16px;
- outline-width: 3px;
- outline-style: solid;
- outline-color: #0000ff;
- color: #0000ff;
- width: 51.2px;
- font-size: 16px;
- outline-width: 0;
- outline-style: none;
- outline-color: currentColor;
- color: #0000ff;
- width: auto;
width プロパティはインライン要素ボックスに適用されないので、使用値はありません。
- font-size: 16px;
- outline-width: 0;
- outline-style: none;
- outline-color: #0000ff;
- color: #0000ff;
実際の値
与えられた環境では、この使用値を利用することができない場合があります。
例えば 幅 11px の 50% で使用値が 5.5px とか。整数しか処理できない場合は実際に使える値に近づける必要があります。
実際の値とは、この様に実際に使える値に調整したものです。