文書型宣言とブラウザでの表示

文書型宣言の違いが、ブラウザでの表示にも影響を与える場合があります。これは、特にCSSやJavaScriptを使っている場合に影響が出ます。

• Gecko系ブラウザ（Netscape6以降、Mozilla、Firefoxなど）
• Mac版Internet Explorer5
• Internet Explorer6
• Opera7.x

では、文書型宣言及びDTDのURL指定を行うかで、表示モードが変化するからです。これは、DOCTYPEスイッチと呼ばれているモノです。

W3Cの標準的仕様に準拠した「標準モード」と旧来のブラウザとの互換性のある「後方互換モード」の２つです。

Windows版Internet Explorerユーザの場合、バージョンアップは結構熱心ですので、バージョン6への移行も進みつつあります。Windows版Internet Explorer5.xまでとの表示が異なる場合も出てきますので要注意です。

比較的よく使うであろうモノに関してまとめています。
ざっと見てもこれだけの違いがあるとは、、、Netscape4.xとは違う次元で見映えに関する大きな違いが出ます。
見映えをある程度揃えたければ、外部スタイルシート(CSS)をブラウザごとで分けてしまう形を取るのがベターになるかと思います。　

標準モードの方がより正確な記述が求められます。文法違反をしている場合、標準モードではことごとく無視されてしまうのです。WinIE5.xで表示できていたモノが、標準モードでは表示できないなんてこともあり得るのです。

ということで、標準モードではブラウザ間の違いが出てしまう。

これは、WinIE5.xやNetscape4.xでは、CENTER要素や<div align="center">〜</div>といった非推奨の形式で、表組みを中央に配置していたのをmargin:autoという形で置き換えることができるかと点で非常に重要となる。しかし、後方互換モードでは、ブラウザ間の違いが出てしまう。

従来のブラウザでは標準的な文字サイズはfont-size="3"、すなわちsmallと同じ扱いになっていたが、標準モード及びNetscape6の後方互換モードでは、もう１段階文字サイズが大きな扱いになる。

と、後方互換モードでは、IEの場合paddingとborderを含んでしまう。

以下の表にHTMLの主な文書型宣言と表示モードの関係を記しました。表中では後方互換モードは互換モードと略しています。なお、Netscape7(Mozilla1.0.1以降）からは、準標準モードがあります。HTML4.01 TransitionalのURLありと、XHTML1.0 Transitonal DTDが該当します。

ということは、現在HTML4.01 Strictの文書型定義に基づいた文書を作成している場合は、URLありを選択した方がブラウザ間の表示差は小さくなります。まあ、Strictを選択している以上、HTML文書の作成にはこだわりを持っておられると思います。

HTML4.01 Transitionalの文書型定義に基づいた文書を作成している場合にはURLありなしどちらでもよいことになります。

ただし、過去のブラウザ（WinIE5.x等）との互換性を重視するなら、URLなしの文書型宣言を行っておけば良いでしょう。とくにブラウザ移行期では重要になります。

注：確認がとれていないブラウザがあるため、HTML4.01 Framesetについては表中で解説していませんが、おそらくHTML4.01 Transitionalと同じになるかと思います。理由はTransitionalとFramesetの違いがフレーム関連の要素の有無だけなので。 HTML4.01 Framesetはフレームセットを定義している文書だけに使用するので、見栄えの違いを確認することが出来ません。実際にフレームが使えるブラウザでの表示される文書の文書型宣言はHTML4.01 Transitionalとなります。申し訳ありません。

ここでは、一般的なサイト作成者がよく使う文書型定義であるHTML4.01 Transitionalで説明します。

URLなしの場合　　URLありの場合

文書型宣言部分以外は全く同じスタイルシートを適用しています。しかし、表示モードとブラウザの違いによって差が出ることが明らかです。

スタイルシートでの指定は以下の通りです。

body{
background-color:ffcccc; color:#333333;
}
h1{
text-align:"center"; color:ff0000; font-size: 1.2em;
}
table{
margin:auto;
}
.maegaki{
width:600;
}
.atogaki{
width:600px; border-width:1px; border-style:solid; border-color:#ff0000;
padding:10px;
}
.tyusyaku{
color:#993300; font-size:x-small; width:550px;
}

実は間違いがたくさんあります。間違いがわからない方は、CSS関係のサイトで勉強しなおしましょう。

今回、このページを作成するに当たっては、（株）毎日コミュニケーションズ　Web Designing02 p.117　大藤幹氏の記事を参考にしましたことをお断りしておきます。