レンダリングテスト
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">（XML宣言有り）
セレクタテスト
基本的なセレクタ
E F
Eというエレメントの子孫であるFというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E#myid
IDが"myid"と等しいEというエレメント。
対象のテキストノード（赤太字であれば正常に解釈しています）
E.hoge
クラスが"hoge"であるEという要素(その文書言語はクラスが決定される方法を明示する)。
対象のテキストノード（赤太字であれば正常に解釈しています）
属性セレクタ
E[foo]
"foo"という属性のEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[foo="bar"]
"foo"というアトリビュートの値が厳密に"bar"と等しいEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[foo~="bar"]
"foo"というアトリビュートの値がスペースで区切られた値のリストであり、そのひとつが厳密に"bar"と等しいEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[foo^="bar"]
"foo"というアトリビュートの値が厳密に文字列"bar"から始まるEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[foo$="bar"]
"foo"というアトリビュートの値が厳密に文字列"bar"で終わるEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[foo*="bar"]
"foo"というアトリビュートの値が部分文字列"bar"を含むEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E[hreflang|="en"]
"hreflang"というアトリビュートが、"en"で(左から)始まる値のハイフンで区切られたリストであるEというエレメント
ほげ対象のテキストノード（赤太字であれば正常に解釈しています）
子セレクタ
E > F
Eというエレメントの子であるFというエレメント（子とは直下にあるものをさします）
対象のテキストノード（赤太字であれば正常に解釈しています）
隣接セレクタ
E + F
Eというエレメントの直後に来るFというエレメント
ほげほげ対象のテキストノード（赤太字であれば正常に解釈しています）
E ~ F
Eというエレメントの後に来るFというエレメント
ほげほげほげほげ対象のテキストノード（赤太字であれば正常に解釈しています）
疑似クラス
E:first-child
その親の最初の子であるEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）ほげほげ
E:last-child
その親の最後の子であるEというエレメント
ほげほげ対象のテキストノード（赤太字であれば正常に解釈しています）
E:nth-child(n)
その親のn番目の子であるEというエレメント（数式やodd、evenなども使えるようです）
ほげ対象のテキストノード（赤太字であれば正常に解釈しています）ほげ
E:nth-last-child(n)
最後のから数えてその親のn番目の子であるEという要素（数式やodd、evenなども使えるようです）
ほげ対象のテキストノード（赤太字であれば正常に解釈しています）ほげ
E:only-child
その親の唯一の子であるEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E:only-of-type
その種類の唯一の兄弟であるEというエレメント
対象のテキストノード（赤太字であれば正常に解釈しています）
E:empty
(テキストのノードを含めて)子供を持たないEというエレメント
←に赤いBorderが引かれたら正常に解釈しています
擬似要素
E:before
Eというエレメントの前に生成される内容
E:after
Eというエレメントの後に生成される内容
このテキストの前後に「before」「after」が現れれば解釈しています。
連続Class
E.hoge1.hoge2
hoge1とhoge2というクラスを両方とも持つE
対象のテキストノード（赤太字であれば正常に解釈しています）
打ち消しセレクタ
E:not(s)
単純なセレクタsにマッチしないEというエレメント
ほげ対象のテキストノード（赤太字であれば正常に解釈しています）ほげほげ
ハックテスト
centricle : css filters (css hacks)を参考にしています。
アンダースコアハックテスト
_property（CSSを外部においた場合）
プロパティの直前に「_（アンダースコア）」を付ける（主にIE6用）
対象のテキストノード（赤太字であればアンダースコアハックした指定が読み込まれています。）
_property（CSSをStyle要素で記述した場合）
プロパティの直前に「_（アンダースコア）」を付ける（主にIE6用）
対象のテキストノード（赤太字であればアンダースコアハックした指定が読み込まれています。）
_property（CSSをStyle属性で記述した場合）
プロパティの直前に「_（アンダースコア）」を付ける（主にIE6用）
対象のテキストノード（赤太字であればアンダースコアハックした指定が読み込まれています。）
* htmlハックテスト
* html
セレクタ指定の先頭に、「*（グローバルセレクタ）」を付ける
対象のテキストノード（赤太字であれば* htmlハックした指定が読み込まれています。）
ホーリーハックテスト
/*\*/ property /*/ property /* */
コメントの終了部「*/」の直前に「\」をおいた場合、ブラウザの解釈の違いによって振り分ける（主にMacIE5用）
/*\*/ この部分が赤太字の場合は読み込まれています /*/ この部分が赤太字の場合は読み込まれています /* */
ボックスモデルテスト
ボックスモデル解釈のテスト
- width:470px（500-(10+10)-(5+5)）
- padding:10px;
- margin:10px;
- border:5px;
下の画像と横幅が同じ場合、解釈が正しい。
ボックスモデル修正のハックテスト
- width:500px
- padding:10px;
- margin:10px;
- border:5px;
text-alignテスト
text-align:center;
真ん中寄せになっちゃ駄目
正当な記述
width:200px;margin:0 auto 0 auto;
横幅を必ず固定すること
真ん中寄せになっているのが正しい
IEへの対応
真ん中寄せになっているはず。
width:200px;margin:0 auto 0 auto;
text-align:left;を子ボックスに追加。これで揃えが戻る
table要素テスト
cellpadding="0" cellspacing="0"
| TH | TD | TD |
|---|---|---|
 |
|
|
cellpadding,cellspacingなし border-collapse:separate;
| TH | TD | TD |
|---|---|---|
|
|
|
cellpadding,cellspacingなし border-collapse:collapse;
| TH | TD | TD |
|---|---|---|
|
|
|
cellpadding="0" cellspacing="0" 暫定的回避方法
| TH | TD | TD |
|---|---|---|
|
|
|