Webブラウザの検証！

複雑化するWebブラウザの検証

　WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。

　テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。

　現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counterでの発表「W3Counter Global Web Stats（http://www.w3counter.com/globalstats.php）」では、2008年3月時点で、IE 6が38%、IE 7が23%、Firefoxが25%、Safariが2%、Operaが1%となっています。

　シェアナンバー1のIE 6がリリースされたのが2001年です。現行のCSS2は、リリースされていましたが、まだこの時点ではCSSレイアウトは普及していなかったため、IE 6はCSS解釈に多くのバグを抱えていました。

　その後、2003年から2004年にかけて、Firefox、Opera、Safariといった新しいWebブラウザ（通称：モダンWebブラウザ）がリリースされました。これらはCSS2の仕様に準拠しており、CSSレイアウトが普及する後押しをしたと言えます。モダンWebブラウザに押されてようやくIE 7がリリースされたのが2006年です。Firefox、Safari、OperaといったモダンWebブラウザが台頭してきたといはいえ、まだまだIEが半数以上のシェアを維持しています。

間違えやすい検証の順番

　CSSコーディングでつまずきやすいのは、Webブラウザ検証の順番を間違える場合です。「自分が使っているから」「シェアの多さで」という理由で、IEを使ってコーディングを行うと、間違ったCSS解釈に準じてレイアウトを組んでしまいます。IEでレイアウトを見てコーディングをすると、その後、他のWebブラウザでレイアウトが崩れることが多いからです。

　そして、今度は崩れた箇所をモダンWebブラウザで見ながら修正しても、またIEでおかしくなります。では、どのように検証していけば良いのでしょうか。

　CSSの準拠度が高いのはモダンWebブラウザです。まず、モダンWebブラウザを基準にしてレイアウトを組み、IEだけを対象に個別の指定を行えば良いでしょう（図1）。この考え方は、CSSの正しい仕様と解釈に基準をおいてコーディングを行う方法です。

　現在のIE 7は、多くの点でIE 6よりもバグが解消されていますが、モダンWebブラウザに比べるとCSSの部分で対応できていない点があります。すでにベータ版がリリースされているIEのバージョン8は、CSSに対するWebブラウザバグが解消され、CSSの準拠度が改善される予定です。もし今の段階で、IE 6や7を基準にCSSを組んでしまうと、将来的にIE8では、ページレイアウトが崩れてしまう可能性が高いでしょう。