PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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