CSS2

CSS2は非常に難しいので、ブラウザが対応しそうなものだけ集めています。CSS1属性のCSS2での定義については、比較表をご覧ください。

Characters and case

CSS2では、ISO10646で161以上のコードである文字もセレクタに使えるようになりましたので、次のような記号はエスケープする必要がありますが、クラスセレクタに日本語を使うのは可能になりました。ただし、id属性値に関してははHTMLで使える文字が制限されています。CSS2は一応XMLにも適用できるように拡張されていて、XMLにおけるID型の属性値は日本語も使うことができます。

! " # $ % & ' ( ) * + , . / : ; < =  > ? @ [ \ ] ^ _ ` { | } ~

.重要 { color: red }
.最新情報 { font-weight: bold  }
.重要.最新情報 { text-decoration: underline }

<STRONG class="重要">お知らせ</STRONG> 
<STRONG class="重要 最新情報">お知らせ</STRONG> 

セレクタの先頭に数字とハイフンが使えないのはCSS1と同じです。エスケープすればOKなのですが、エスケープ文字「\」を使うとIEでは結果がおかしく、NC4（Win NC4.05以前）はJavaScriptエラーになる場合があるので、あまり実用的ではありません。

Inherit

CSS1では、相対的な指定の場合は計算後の値を継承するとなっているのですが、計算結果（算出値）をUAが丸めた場合、算出値と実際に使用された値（実行値）のどちらを継承するかという点が不明瞭です。CSS2では継承するのは算出値だと強調されていて、親要素の（算出）値を強制的に継承させたい場合にinheritという値を指定します。全ての要素にマッチするセレクタと組み合わせると便利です。

inheritは、全ての属性に共通で、常に単独で用いなければならない特殊な値です。つまり、「font: 12pt inherit」というのはダメで、「font: inherit 」とします。次の例なら、通常は継承しないborderの値を強制的に継承させることができます。

IEは対応していませんが、Netscape6は対応しています。

Pattern matching

CSS2では、以下のようにセレクタのマッチングが細かく制御出来るようになりました。

全ての要素とマッチするセレクタを詳細度0として導入したことにより、HTML属性の詳細度は0に変更されました。属性セレクタと擬似クラスは詳細度10として計算します。

• ※ : 認識するが正しくない。
• △ : 特定の要素なら可。

WinIEは「*」の扱いがでたらめなので、省略した方が良いです。「*」のみでなければ、「*」は省略できます。

*[foo] → [foo]
*[foo~="warning"] → [foo~="warning"]

Specifying media-dependent style sheets

media属性で出力媒体（screen, tty, tv, projection, handheld, print, braille, aural, embossed, all）を限定することが出来ます。ピクセル単位はデバイス解像度に依存するので、典型的なコンピュータ画面と極端に異なる場合は、UAが調整すべきだとされています。

• all （全てのデバイスにあてはまる）
• screen （カラーのコンピュータ画面）
• print （印刷と印刷プレビュー）

HTML 4の仕様書では、既定値は「screen」と解説されていますが、DTDでは環境に依存することになっていて、CSS2の仕様書では指定が無い場合はmedia="all"と同じであるとされています。値はコンマで区切って複数指定することも出来ます。

<LINK rel="stylesheet" type="text/css" media="print" href="uri">
<LINK rel="stylesheet" type="text/css" media="screen" href="uri">

<STYLE type="text/css" media="print"></STYLE>

<STYLE type="text/css">
@import url(uri) screen; /* Netscape6, MacIE4.5で対応 */
BODY { color: blue }
@media screen {
  BODY { color: red } /* Netscape6, WinIE5で対応 */
}
</STYLE>

※ Mac版のIE4.0（IE4.5で修正されている）等ではmedia属性の値を無視して適用してしまうので、media = "screen"の方を下にして上書きするようにして下さい。NC4は、指定しないかmedia = "screen"でないと適用しません。media属性サンプル

それと、属性の定義にMediaという項目がありますが、これはその媒体型をサポートしていると称するためには必ず実装しなければならないことを表し、媒体名よりも媒体グループで提示されます。他にも条件はありますが、少なくとも一つの媒体型をサポートすればCSS2に適合することになっています。

Containing Block

CSS1では、親要素のwidthを参照する場面が多いのですが、CSS2ではcontaining block（包含ブロック）という考え方を導入して、変更（修正）が加えられています。

CSS1

refer to parent element's width

CSS2

refer to width of containing block

CSS1の範囲で考えると、包含ブロックは最も近い祖先のブロック要素の内容を囲む辺で、祖先にブロック要素がなければBODYの内容辺が包含ブロックになります。要するに、親要素の内容幅からブロックレベルである祖先要素の内容幅を参照すると訂正されたということです。

CSS2では要素の絶対配置が可能になっていて、絶対配置される要素の包含ブロックは、positionの値がstatic以外である最も近い祖先要素を対象にして、場合分けが必要になります。

ブロックレベル要素である場合

パディングを囲む辺が包含ブロック。

インライン要素である場合

内容を囲む辺が包含ブロック。インライン要素が包含ブロックを設定する場合は、分割のされ方によって基準が大きく変わってしまう。

存在しない場合

ルート要素（HTML）の内容辺が包含ブロック。ルート要素に設定したwidth, heightが有効でない限り、幅はUA依存、高さは文書の内容量によって変化する。

position:

displayがnoneであれば、positionとfloatは無視されます。positionの値がrelativeまたはabsoluteである要素のマージンは相殺されません。ルート要素（HTML）に対する指定は無効です。

• position: relative サンプル
• position: absolute サンプル ( for IE4, IE5, N6 )

static

通常の配置。left, top, bottom, left属性は効果を持たない。

• NC4 : IMG要素は関係ない位置に配置される。

relative

通常の配置に対して相対的に配置される。

• NC4 : 置換, TABLE以外の要素は可。IMG要素は関係ない位置に配置される。
• Netscape6, WinIE4, WinIE5は実用レベル。

absolute

ボックスの位置は、left, right, top, bottom属性で包含ブロックとの距離として指定される。絶対配置のボックスは兄弟要素の配置に影響を及ぼさず、マージンの相殺は起こらない。また、floatにnone以外の値が指定されていればnoneに変更され、none以外のdisplay値はblockに変更される。

• WinIE4 : SPAN, DIV, 置換, TABLE要素は可。
• NC4 : 置換,TABLE以外の要素は可。IMG要素は関係ない位置に配置される。
• IE5, Netscape6は実用レベル。

fixed

ボックスの位置は絶対配置モデルに従って計算される。加えて、包含ブロックが閲覧領域に設定されるので、スクロールしても移動しない。印刷などのページ媒体では全てのページに繰り返される。floatにnone以外の値が指定されていればnoneに変更され、none以外のdisplay値はblockに変更される。

#header {
  position: fixed;
  width: 100%;height: 15%;
  top: 0;
  left: 0;
}      

#footer {
  position: fixed;
  width: 100%;height: 15%;
  bottom: 0;
  left: 0;  
  margin-top: auto;
}

MacIE5が一応対応していますが、WinIE5はバグるので、次のようにエスケープした方が良いかもしれません。

position: \66\69\78\65\64; /* fixed */ 

top ,left, right, bottom:

「positioned elements」とは、position属性の値がstatic以外である要素。以下の四つの属性に従ってレイアウトされる。「auto」という値については、Computing widths and margins, Computing heights and marginsをご覧下さい。

top

ボックスのマージンを囲む辺の上辺が、包含ブロックの上辺から垂直方向にどれだけ離れているかを指定する。%で指定した場合は包含ブロックの高さを参照する。positionがstatic以外である祖先要素が無いときは、ルート要素の内容辺が包含ブロック。

left

ボックスのマージンを囲む辺の左辺が、包含ブロックの左辺から水平方向にどれだけ離れているかを指定する。%は包含ブロックの幅を参照する。

right

ボックスのマージンを囲む辺の右辺が、包含ブロックの右辺から水平方向にどれだけ離れているかを指定する。%は包含ブロックの幅を参照する。

• IE5, Netscape6

bottom

ボックスのマージンを囲む辺の下辺が、包含ブロックの下辺から垂直方向にどれだけ離れているかを指定する。%は包含ブロックの高さを参照する。

• IE5, Netscape6

z-index:

配置指定された要素（positionの値がstatic以外）に有効な属性です。

CSS2ではブロックの配置空間は3次元で、相対配置や絶対配置によってボックスが重なる場合の順番を指定します。0または正負の整数で指定されたz-indexが大きいほど上に重なり、等しければソースで後に現れるものが上に重なっていきます。初期値のautoは親のz-indexと同じにするということです。

下図のような階層構造になっている場合、親の子に対するz-indexは常に0とするので、指定していない場合は親と同じ0になり、負の値を指定しない限り親要素の下に潜ることはありません。ややこしいですが、単純に引き継ぐのではありません。

BODY
         P(z-index: 10） 
                ↓0      SPAN(z-index: 5)

IE4, NC4共にサポートしていますが、複雑な構造や負の値を与えると怪しくなります。z-indexサンプル

Computing widths and margins

場合分けが面倒なので、書字方向が左から右の場合に限定します。

絶対配置でない要素

left, rightのautoは0。後は、CSS1と同じ。

絶対配置される非置換要素

算出値は以下の式を満たすように決定される。

'left'
 + 'margin-left' + 'border-left-width' + 'padding-left' 
 + 'width'
 + 'padding-right' + 'border-right-width' + 'margin-right'
 + 'right'
 = width of containing block 

（border-styleの値がnoneなら、border-widthには0を用いる。）以下の順で従っていけば、この制約は解決する。

• leftの値がautoなら、positionの値がstaticであると仮定した場合に、要素が最初に持つボックスのマージン左辺と、包含ブロックとの距離をautoと置き換える。(UAは、このようなボックスの位置を算出ではなく推測しても良い。)包含ブロックより左なら、値は負になる。
• widthの値がautoであり、rightの値もautoなら、rightの値を0と置き換える。
• rightまたはwidthの値がautoで残っているなら、margin-left, margin-rightのautoを0と置き換える。
• この時点で、まだmargin-left, margin-rightがどちらもautoなら、両者を同じ値として等式を解く。
• この時点で、autoが一つだけ残っていれば、等式を満たすように導き出す。
• この時点で等式を満たさなくなっていれば、rightの値を無視して等式から導き出す。

絶対配置される置換要素

上の手順とほぼ同じ。ただ一つ違うのは、widthの値がautoであれば固有の寸法で置き換える。その後で、上記の手順で算出する。

min-width:

ボックス幅の最小値を設定します。ただし、UAはmin-width属性に負でない最小値を設けても良く、要素や他の属性との兼ね合いで変更しても良いとされています。この段落は、width: 80%;min-width: 600pxに設定してあるので、対応しているブラウザ（Netscape6）なら、最低でも600px確保されます。

widthを設定せず、min-widthだけ設定することも可能です。この場合は、widthの算出値がそれを下回ってしまう場合にwidthの指定値として用いられ、他の値も再計算されます。

max-width:

ボックス幅の最大値を設定します。この段落はwidth: 500px;max-width: 80%に設定してあります。対応しているブラウザ（Netscape6）なら、横スクロールバーを出さずに、可能ならある程度の幅を確保したい場合などに便利かもしれません。

widthを設定せず、max-widthだけ設定することも可能です。この場合は、widthの算出値がそれを上回ってしまう場合にwidthの指定値として用いられ、他の値も再計算されます。

Computing heights and margins

絶対配置でないインライン要素, 絶対配置でない置換要素

置換要素のheightの値がautoであれば、固有の寸法と置き換える。他のautoは全て0だが、非置換インライン要素のheightは効果を持たない。

絶対配置でない非置換ブロック要素, 絶対配置でない非置換浮動要素

top, bottom, margin-top, margin-bottomの値がautoなら0。

絶対配置される非置換要素

垂直方向の長さは以下の等式を満たさなければならない。

'top'
 + 'margin-top' + 'border-top-width' + 'padding-top'
 + 'height'
 + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom'
 + 'bottom'
 = height of containing block 

（border-styleの値がnoneなら、border-widthには0を用いる。）以下の順で従っていけば、この制約は解決する。

• topの値がautoなら、positionの値がstaticであると仮定した場合に、要素が最初に持つボックスのマージン上辺と、包含ブロックとの距離をautoと置き換える。(UAは、このようなボックスの位置を算出ではなく推測しても良い。)包含ブロックより上なら、値は負になる。
• heightの値がautoであり、bottomの値もautoなら、bottomの値を0と置き換える。
• bottomまたはheightの値がautoで残っているなら、margin-top, margin-bottomのautoを0と置き換える。
• この時点でまだmargin-toip, margin-bottomがどちらもautoなら、両者を同じ値として等式を解く。
• この時点でautoが一つだけ残っていれば、等式を満たすように導き出す。
• この時点で等式を満たさなくなっていれば、bottomの値を無視して、計算から導き出す。

絶対配置される置換要素

上の手順とほぼ同じ。ただ一つ違うのは、heightの値がautoであれば固有の寸法で置き換える。その後で、上記の手順で算出する。

min-height:

max-height:

overflow:

包含ブロックからはみ出した部分をどのように扱うかを指定する属性です。初期値はvisibleなので、内容がはみ出してしまうようなwidth, heightを指定しても効いていないように見えることがあります。widthとheightを同時に設定すると、MacIE4では内容がちょん切られる場合がありますので注意して下さい。

visibility:

visibility: hiddenとしても、見えないだけでレイアウト上は存在しているように扱われる点で、display: noneとは異なります。

TR, THEAD, TBODY, TFOOT, COL, COLGROUP要素にvisibility: collaspeと設定した場合は、表示させないことによって生じた空間を他の要素に利用させるという指定ですが、それ以外の要素においてはhiddenと同じ意味です。スクリプトと組み合わせて動的に表の行または列を除去することを想定しているようです。

• WinIE4 : SPAN, 置換, DIV要素は可。
• NC4 : IMG, TEXTAREA, INPUT, TABLE要素は不可。
• IE5, Netscape6 : 実用レベル。

The :before and :after pseudo-elements

ある要素の直前あるいは直後に、擬似的に内容を挿入します。挿入された内容（疑似要素）は、疑似要素を取り付けられた要素の一部として整形され、継承する属性値を引き継ぎます。display属性の初期値は、CSS2ではinlineです。挿入する内容はcontent属性で設定します。

:before, :after疑似要素においては、position, float, list関連, table関連属性は無視されなければならないとされています。

• ブロック要素に取り付ける疑似要素のdisplay属性値は、none, inline, block, markerであれば有効。そうでなければblockに変更される。
• インライン要素に取り付ける疑似要素のdisplay属性値は、none, inlineであれば有効。そうでなければinlineに変更される。

Netscape6がサポートしています。

content:

擬似要素の内容を指定します。擬似要素サンプル（Netscape6は一部対応）

<string>

テキスト内容。「"」または「'」で引用する。対になっている2重引用符の間で、2重引用符を文字として使うには、「\"」, 「\22」のようにエスケープする。改行は「\A」。

DIV P.note:before { content: "Note: " }
BODY:after { 
 content: "The End";
 display: block;
 margin-top: 2em;
 text-align: center;
}

<uri>

画像や音声ファイルといった外部リソースのURIを指定する。UAは、媒体型が原因でそのリソースをサポートできない場合、リソースを無視しなければならない。

DT:before { content: url(marker.gif) }
DT:before { content: url(marker.gif) " " } /* スペースも挿入 */

<counter>

名前を付けたカウンタの、整形時の値を文字列として生成する関数counter()を用いる。counters()という関数もあるが、省略。

counter(name)
counter(name, <'list-style-type'>)

上のような2通りの指定法があるが、デフォルトでは1つ増える10進数になる。counter-increment属性で増加幅を変更したり、counter-reset属性でリセットすることもできる。

counter-reset属性のスコープに入っていなカウンタは、ルート要素で0に初期化され、増加よりも初期化が先なので、次の例では、H1要素には第1章、第2章と自動的に番号が振られる。displayをnoneに設定すると、カウンタは増えない。

H1:before {
content: "第" counter(chapter) "章 ";
counter-increment: chapter;
}

<attr(X)>

疑似要素を取り付けた要素のX属性値を、文字列として返す関数。X属性を持たない場合、空文字列を返す。大文字小文字を区別するかは、文書のマークアップ言語に依存する。

IMG:after { content: " [ " attr(alt) " ]" }

<open-quote>, <close-quote>

quotes属性によって適当な文字列に置き換えることもできる。

Q:before { content: open-quote;color: red }
Q:after { content: close-quote;color: blue }

<no-open-quote>, <no-close-quote>

空文字列を挿入するだけだが、引用の入れ子レベルが増加（減少）する。quotes属性で入れ子のレベルが重要になるので、引用符を入れたくない場合の数合わせ。

BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }

quotes:

引用符を制御します。引用の入れ子の深さに応じた指定も可能です。

none

content属性の値がopen-quote, close-quoteでも引用符を生成しない。

[<string> <string>]+

content属性の値がopen-quote, close-quoteである場合に、開閉ペアになった引用符リストから値が選択される。open-quoteの出現回数からclose-quoteの出現回数を引いた数を入れ子のレベルとすると、レベルが1なら最初のペア、2なら次のペアが用いられる。レベルがもっと深ければ、最後のペアがそれ以降繰り返し用いられる。ソースでの入れ子とは無関係。

quotes: '引用開始 ' ' 引用終わり';
quotes: '"' '"' "'" "'";

counter-reset, counter-increment:

counter-reset, counter-increment属性はカウンタ名と整数値で指定する。整数値は省略可能で、それぞれ0と1が初期値。

H1:before {
content: "第" counter(chapter) "章 ";
counter-increment: chapter;          /* 整数値を省略すると1増える */
counter-reset: section 0; 
}

H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}

上の例だと、chapterカウンターはcounter-reset属性のスコープに入っていないので、ルート要素で0に初期化されたとみなされます。H1要素の直前で、sectionカウンターを0にリセットし、chapterカウンターを1増やすという動作が繰り返されるので、以下のように整形されます。

第1章 ***

1.1 ***
1.2 ***

第2章 ***

2.1 ***

また、入れ子は次のような法則に基づいて考えます。Xカウンタに対するcounter-reset属性を持つ全ての要素は、新たにXカウンタを生成し、そのスコープは自身と先行する兄弟要素及び全ての子孫要素になります。つまり、同名である親要素のカウンタまでリセットしてしまうことはありません。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

<OL>
  <LI>item       
  <LI>item
    <OL>
      <LI>item       
      <LI>item
    </OL>
  <LI>item
</OL>

次のように番号が振られます。

1. item       
2. item   
     1. item       
     2. item   
3. item   

Break before/after elements

• page-break-before:
• page-break-after:

CSS2ではほとんど完全に印刷を制御出来るほどの方法が揃っているのですが、IE4, IE5でサポートされているのは、特定の要素の前後で強制的に改ページさせる方法くらいです。

caption-side:

CAPTION { caption-side:bottom }

Netscape6やMacIE5は、bottomという値をサポートしています。

table-layout:

テーブルは、全てのデータを読み込んでからからでないと表示されないので重いのですが、IE5でテーブルの逐次表示が可能になりました。

CSS2の仕様では、全データを読み込んでからテーブル全体の幅を計算しなくて済むようにテーブル全体のwidthを指定するように求められています。また、一行目でセル要素の幅が決定出来るように指定しておかないと、等幅になってしまいます。大きい方が採用される事になっているので、テーブル全体の幅とセル要素の幅の指定に矛盾があっても問題ありません。

border-collapse:

collapseは境界を結合させます。

separateは、セルの境界を分離させて個別に境界を持たせます。分離させたセルの距離はborder-spacingで指定し、そのスペースはTABLE要素の背景色が用いられます。

境界を分離させたモデルにおいては、TR, THEAD,T BODY, TFOOT, COL, COLGROUP要素の境界は存在してはいけません。

Netscape6, WinIE5がサポートしていますが、Netscape6はきちんと結合しないようです。

border-spacing:

分離境界モデルにおけるセル間の距離を長さで指定するのですが、負の値は不正です。スペースで区切って水平 垂直方向に異なる値を与えることも出来ます。

Netscape6がサポートしています。

empty-cells:

&nbsp;, CR(\0D), LF(\0A), タブ(\09), スペース(\20)以外の文字を内容として持たないセルと、visibility: hiddenであるセルの境界を表示させるかどうかを指定します。

Netscape6がサポートしています。

border-style:

分離境界の表においては、CSS1と同じ意味でborder-styleを扱えます。hiddenはnoneと等価です。

結合境界の表においては境界の競合を解決するため、若干の意味変更と優先順位の導入が行われています。

まず、hiddenもnoneも境界なしの指定なのですが、前者は常に最優先で後者は常に最低の優先度とします。つまり、hiddenであれば境界は絶対に表示されず、noneは上書きされます。それ以外は太い境界の指定が優先され、同じ太さの指定であれば以下の優先順位が適用されます。

double > solid > dashed > dotted > ridge > outset > groove > inset

太さもスタイルも同じで、色のみ異なる指定の競合は次の優先順位を適用します。

（TD, TH） > TR > （THEAD, TBODY, THOOT） > COL > COLGROUP > TABLE

cursor:

カーソルをURIから取り出す方法は今のところ使えません。IE4, IE5, Netscape6で使えるのは、カーソルの種類を以下の中から一つ指定する方法だけです。IEはリンクを指し示すpointerをhand（MacIE5はpointerでもhandでも可）と指定しないと認識しません。

以下のように設定すれば、URIから取り出したカーソルを利用できない場合は、waitを値として採用しなければならないことになっているのですが、全て無視されるようです。

User preferences for colors

システム色を使うことによって、ユーザーの好みや特別な設定（色覚障害によるものなど ）を反映させる事が出来ます。システムに存在しない場合は、最も近いものかデフォルト値で代用すべきだとされています。

IE4(Mac版は4.5)から対応しています。N6も対応するようです。システム色一覧

MacIEのシステム色についてのお勧めリンク

Internet & Computer