!DOCTYPE スイッチ Others 資料

現在リリースされている視覚ブラウザには、宣言された文書型定義（DTD）に応じてレンダリングモード（表示モード）を切り替えてしまう機能が備えられています。これを !DOCTYPE スイッチ（!DOCTYPE Switching）といいます。本来、制作者は宣言した文書型定義（DTD）に応じて、定義されている仕様（ルール）に沿った文書を作成すれば、その仕様通りの表示が期待できます。しかし、Windows版Internet Explorer 6 においては、XHTML の規格で文書を作成する場合に、1行目が XML文章であることを宣言する XML宣言から開始されていると、W3C の定義した CSS の仕様に準拠した正しい表示が期待できる標準準拠モードでレンダリングを行うはずが、CSS の仕様に準拠しない勝手な（独自の）レンダリングを行う後方互換モードに切り替わってしまうという問題を抱えた実装になっています。

標準準拠（standard）モードと後方互換（quirk）モード

現在リリースされている Internet Explorer, Opera, Firefox などの視覚環境の UA のほとんどが互換性を重視した（quirk：クヮァーク）モードと仕様を重視した（standard：スタンダード）モードのレンダリングモードを用意しています。全ての制作者が仕様に準拠して正しい書式に沿った文書を作成していれば何も問題はありませんが、中には問題のある記述をしている制作者もいるために、各 UA は宣言されている文書型定義（DTD）に応じてレンダリングモード（表示モード）を自動的に切り替えてしまう機能を用意しており、以下のような勝手な拡大解釈をすることになったり、仕様で定義されている内容とは異なる独自の間違った解釈をするようになります。

上記で取り上げたのは一部ですが、このように標準準拠（standard）モードと後方互換（quirk）モードにより CSS の振る舞い（表示方法）が異なります。この !DOCTYPE スイッチにより制作者側が誤った表示指定を行ってしまうことになるのが、XHTML の規格で文書を作成する場合に1行目に XML宣言をすることで主要ウェブブラウザの中で、唯一 Windows版Internet Explorer 6 のみが後方互換（quirk）モードに切り替わってしまうことです。制作者の中には Windows版Internet Explorer 6 でしか仕上がり後の表示確認をとっていない方が多く、その結果、1行目に XML宣言があっても標準準拠（standard）モードとして正常に認識する UA で確認した際に表示崩れを起こしていることに気付いていない制作者の方が多くいます。

たとえば、CSS での段組みを行うために上記のようなスタイルシートを記述して、XHTML文書の1行目が XML宣言が開始されている場合、Windows版Internet Explorer 6 のレンダリングモードは自動的に後方互換モードとして認識するため paddingプロパティ, borderプロパティで指定された値は widthプロパティ, heightプロパティに内包して計測する独自のレンダリングが行われます。これにより上記の "width : 80% ;" に加えて "border-left : 1px ;" の指定があるはずなのに、枠線の "1px" 分の指定は "width : 80% ;" に含んで計測することになります。このため Windows版Internet Explorer 6 で表示確認を行うと、問題なくきれいにレンダリングされているように勘違いしてしまうのですが、他の UA では "width : 80% ; + border-left : 1px ;" と指定された値を正確に解釈できるので、最終的なボックスの幅は "width : 80% ; + 1px + width : 20% ;" ということになり、"100%" を "1px" 分オーバーしてしまっているために当然表示崩れを起こすことになります。

その結果、Windows版Internet Explorer 6 でしか表示の確認を行っていない制作者の多くが正常な解釈をする UA で閲覧した際に表示崩れを起こしていることにも気付かないことが起こりえるようです。このように日本人の Microsoft Internet Explorer 贔屓（びいき）による Windows版Internet Explorer 6 のみに偏った表示確認は、初心者が CSSデザインを行う際に、最もつまづくことが多い事例といえるでしょう。2006年10月に Windows版Internet Explorer 7 がリリースされ、この問題は改善されたので、初心者には Internet Explorer 7 が良い薬となることでしょう。

主要視覚ブラウザの !DOCTYPE スイッチ一覧表

DOCTYPE宣言（文書型宣言）	MacIE5	WinIE6	WinIE7	Opera9	Firefox1	Safari2
DOCTYPE宣言（文書型宣言）	MacIE5	WinIE6	WinIE7	Opera9	Firefox1	Safari2
DTDやHTMLバージョンの指定なし、または HTML 2.0、及び 3.2 の場合	quirk	quirk	quirk	quirk	quirk	quirk
HTML4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">	quirk	quirk	quirk	quirk	quirk	quirk
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">	quirk	quirk	quirk	quirk	quirk	quirk
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">	quirk	quirk	quirk	quirk	quirk	quirk
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">	quirk	quirk	quirk	quirk	quirk	quirk
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	standard	standard	standard	standard	standard	standard
XHTML1.0(MIMEタイプ：text/html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	standard	standard	standard	standard	standard	standard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	standard	standard	standard	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	standard	quirk	standard	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	standard	quirk	standard	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	standard	quirk	standard	standard	standard	standard
XHTML1.1(MIMEタイプ：text/html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	standard	standard	standard	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	standard	quirk	standard	standard	standard	standard
XHTML Basic（MIMEタイプ：text/html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	standard	standard	standard	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	standard	quirk	standard	standard	standard	standard
XHTML1.0(MIMEタイプ：application/xhtml+xml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	error	error	error	standard	standard	standard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	error	error	error	standard	standard	standard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	error	error	error	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	error	error	error	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	error	error	error	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	error	error	error	standard	standard	standard
XHTML1.1(MIMEタイプ：application/xhtml+xml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	error	error	error	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	error	error	error	standard	standard	standard
XHTML Basic（MIMEタイプ：application/xhtml+xml）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	error	error	error	standard	standard	standard
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	error	error	error	standard	standard	standard

Windows版Internet Explorer 6 では文書の1行目が文書型定義（DTD）から始まっていない場合、つまり XHTML文書では XML宣言を記述しなければならないために quirk（互換）モードとして認識することになりますが、文字コードに "UTF-8"、または "UTF-16" を使用することで XML宣言自体を省略することが可能となっています。もちろん、Windows版Internet Explorer 6 にだけに偏った表示確認を行うのではなく、ユーザーの観覧環境を問はずとも、どのような環境でも快適に観覧できるように配慮して制作することが一番大事です。なお今後の方向性として、各UA が用意していたレンダリングモードを切り替える機能は廃れていくことになると思われるので、ウェブコンテンツ制作者は、しっかりと基本となる XHTML と CSS の仕様を理解しておかなければなりません。