明男Tweet複雑化するWebブラウザの検証WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。Explorer(通称IE)のバージョン6と7、Firefox、Safari、Operaです。7が23%、Firefoxが25%、Safariが2%、Operaが1%となっています。6がリリースされたのが2001年です。6はCSS解釈に多くのバグを抱えていました。その後、2003年から2004年にかけて、Firefox、Opera、Safariといった新しいWebブラウザ(通称:モダンWebブラウザ)がリリースされました。これらはCSS2の仕様に準拠しており、CSSレイアウトが普及する後押しをしたと言えます。7がリリースされたのが2006年です。Firefox、Safari、OperaといったモダンWebブラウザが台頭してきたといはいえ、まだまだIEが半数以上のシェアを維持しています。間違えやすい検証の順番CSSコーディングでつまずきやすいのは、Webブラウザ検証の順番を間違える場合です。「自分が使っているから」「シェアの多さで」という理由で、IEを使ってコーディングを行うと、間違ったCSS解釈に準じてレイアウトを組んでしまいます。IEでレイアウトを見てコーディングをすると、その後、他のWebブラウザでレイアウトが崩れることが多いからです。今度は崩れた箇所をモダンWebブラウザで見ながら修正しても、またIEでおかしくなります。どのように検証していけば良いのでしょうか。CSSの準拠度が高いのはモダンWebブラウザです。モダンWebブラウザを基準にしてレイアウトを組み、IEだけを対象に個別の指定を行えば良いでしょう(図1)。この考え方は、CSSの正しい仕様と解釈に基準をおいてコーディングを行う方法です。6よりもバグが解消されていますが、モダンWebブラウザに比べるとCSSの部分で対応できていない点があります。ベータ版がリリースされているIEのバージョン8は、CSSに対するWebブラウザバグが解消され、CSSの準拠度が改善される予定です。6や7を基準にCSSを組んでしまうと、将来的にIE8では、ページレイアウトが崩れてしまう可能性が高いでしょう。この著者の記事一覧Webデザイナー。印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。誠にありがとうございます。下記日程にて、メンテナンスを行います。ご理解いただけますよう、お願い申し上げます。状況により前後する場合がございます。※上記以外の会員機能(サイトへのログインなど)はご利用いただけます。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。