ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ レイアウト(box要素)と標準・互換モードとの関係 ]

レイアウト(box要素)と標準・互換モードとの関係

CSSを使い始めると問題になってくるのが、「標準モード」と「互換モード」というレンダリングの違いだ。このモードの違いによりbox要素のwidthの計測方法が異なってくるから細心の注意が必要だ。

18 Januaryr,2006

標準モードと互換モードとは

標準モードとは? W3Cで策定されている規格に忠実に動作するのが標準モードである。

HTML4.01で標準モードの文書型宣言をした場合、結論的には主なブラウザ(IE6 / Firefox / Opera / Mac IE5)での表示の誤差を最小限に押えることができる。標準モードにするにはページの一番上に以下のような文書型宣言の記述が必要になる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

互換モードとは? 互換モードは過去のブラウザとの互換性を維持することに比重を置くが、間違ったCSS解釈をしてしまう問題点がある。以下のような文書型宣言や文書型宣言が無ければ互換モードになる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

※HTML4.01の文書型宣言は上記のほかにもあるが、主なブラウザ(IE6 / Firefox / Opera / Mac IE5)が同一モードとして解釈をしないため省略した。

ポイントはモードの違いでブラウザの表示が異なること

CSSでボックスをセンタリングする場合標準モードではmarginプロパティを利用することで可能であるが、IE6の互換モードではセンタリングされない。Firefoxでは標準・互換モード共にセンタリングを可能にする。

div#container {
margin-left : auto;
margin-right : auto;
}

IE6の場合、ボックスに関するwidthとheightの値についてpaddingとborderの値を含むか含まないかの解釈がモードの違いで発生するが、Firefoxでは標準・互換モード共に正規のCSSの解釈をする。

以上のことはCSSでレイアウトを組む場合、とても重要なことになってくる。例えば、互換モードで作ったウェブページをIE6とFirefoxで相互に見比べるとその表示が大きく異なることに気が付く。また、ここでブラウザとしてIE6以外にFirefoxを引き合いに出すのには訳がある。次のニュースソースを見ていただきたい。

2005年12月分のブラウザー世界シェア調査によると、『インターネット・エクスプローラ』(IE)が85.05%に後退した一方、『Firefox』が9.57%に躍進。また、米アップル社の『Safari』が3位...
■ブラウザー世界シェア、『Firefox』が10%目前 / hotwired japan
11 Jan,2006

実質的にMicrosoft社がIE6の開発を止めてしまったから、Mozilla Firefoxがシェアを伸ばしてきたのは当然だろう。つまりこういう状況になってくると、「標準モード」の文書型宣言をしてFirefoxにおいてもIE6と同等の表示・動作を可能にしなければならない必要性に迫られてきたということか。

現在が求める安全なウェブ構成の準備とは

「いくつかの主なブラウザでウェブを表示させたとき、その表示の誤差を極力少なくするためには、どんな準備をしなければならないか」の簡単なまとめである。

  1. 文書型宣言で「strict」の「標準モード」を指定する。(旧ブラウザとの連携を残す過渡的なDTDと呼ばれるTransitionalはもはや必要ないであろう)
  2. 「strict」は文書の論理的構造を厳密に提示し、レイアウトに関するマークアップは排除されるので、レイアウトとデザインは全てCSS(Cascading Style Sheets)で設定する。
  3. ページが仕上がれば、チェックサイトを利用して文法のチェックを行うことが好ましい。(プロフェッショナルのウェブ品質は高品質を参照のこと
  4. IE6とFirefoxの両方のブラウザにおいて表示・動作の確認を行う。(ここの作業はページ単位で仕上げた都度、確認をしたほうがスムーズにいく。何故ならそのブラウザ特有のバグも存在するからバグ対策も必要になる。)

初めてHTMLの文法に取り組む諸君は「strict」がいい。覚えることも少ないし、無駄な知識を混同させずに進める。しかし、ここまでの制作環境の設定をすっ飛ばした方は、知識の訂正にてこずるかもしれない。

以上のことをルールとしてウェブ制作にかかれば、現実的にも将来的にも極力表示の誤差を少なくすることができ、ウェブポジショニング(SEO)にも有効になるだろう。

リスト(list)画像を使って正しく表示させる

プロフェッショナルのウェブ品質は高品質(「HTML 4.01 Strict」の文書型宣言)

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。