Webブラウザの検証!

2008年4月22日(火)
米倉 明男

複雑化する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では、ページレイアウトが崩れてしまう可能性が高いでしょう。

Webデザイナー。印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。http://www.morethanwords.jp

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています