はじめに
Webページの表示結果がブラウザによって異なって見えるという問題。Web開発に携わる方なら一度は直面したことがあるのではないでしょうか。どのブラウザでもページが同じように表示されるようにするテクニック、いわゆる「クロスブラウザ対応」は現在のWebサイトが備えるべき緊急の課題となっています。
連載第一回目は、このクロスブラウザなデザインを実現するために、まず最初に押さえておきたいポイント「ブラウザの表示モード」を中心に解説します。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。
必要な環境
表示確認用に、Web標準をサポートした複数のブラウザをご用意ください。本稿では、表示モードの切り替え確認に、Windows Internet Explorer6を使用して解説します。
クロスブラウザなデザインの基本的な考え方
Win IEの最新バージョンは7ですが、依然としてIE6のシェアは高いままですね。新しいブラウザが登場しても、ユーザのバージョン移行は、なかなかスムーズには進まないものです。クロスブラウザなデザインを実現するうえで、まずは過去のブラウザに合わせるか、これからのブラウザに合わせるかを考える必要が出てきます。
過去・現在・未来のすべてをカバーする表示が「クロスブラウザなデザイン」と思われるかもしれませんが、それは少し違います。Webの場合は、すべての環境で意図したとおりの見栄えを提供することよりも、まずはあらゆる環境で同じように情報（コンテンツや機能）を提供することの方が大切だからです。
後方互換性
かつてのクロスブラウザなデザインの手法としては、過去のブラウザに合わせてWebページを制作するという「後方互換性」の考え方に基づいた手法が一般的でした。過去のブラウザ戦争で、ブラウザベンダは、いかにして他との差別化を図るかを競い合い、結果、ブラウザの独自拡張という産物をもたらしました。これにより、かつてのWeb制作者は、それぞれのブラウザの種類やバージョンに合わせてWebページを制作する必要があったわけです。TABLEレイアウトや透明GIFを駆使した固定的なレイアウトが多かったのも、そうした流れを受けたものだと言えるでしょう。しかし、こうした後方互換性を意識した制作方法では、文書構造と視覚表現に分離ができない、アクセシビリティを確保できないなどの問題が生じやすくなります。
前方互換性
Web標準をほぼサポートしたモダンブラウザが主流となっている現在では、今後の新しいブラウザでも問題なく表示されることを意識した「前方互換性」を取り、クロスブラウザなデザインに対応するのが一般的です。
「前方互換性」の具体策とは、単純に、Web標準に準拠したWebページを作るというものです。現在のブラウザベンダは、W3Cの仕様に準拠した表示を中心にブラウザの開発を進めています。今後新しい技術が開発されようとも、Web標準を外したものが開発されることはまずないでしょう。つまり、現在とこれからのWeb制作では、これまでのように個々のブラウザに合わせて制作するのではなく、Web標準に合わせて制作すれば良いというわけなのです。
とは言え、さきほど「ほぼサポート」と表現したように、完全にWeb標準をサポートしたブラウザは今のところ存在しません。モダンブラウザといえども、細かなバグや実装差異があるのが現状です。ですから、標準に準拠さえすれば、全ての視覚系ブラウザで同じ見栄えを提供できるというわけではありません。クロスブラウザなデザインを実現するためには、CSSハックを利用してこれをカバーする必要があるわけですが、これについては、本連載の中でおいおい紹介していきたいと思います。
ここで、覚えておいて頂きたいこと。前方互換性の取組みは、モダンブラウザでの閲覧のみを前提とし、過去のブラウザを全く無視するというものではありません。たしかに、デザイナの意図したとおりのビジュアルデザインを古いブラウザに提供することは難しくなります。ですが、冒頭で述べたように、Webというメディアは、その内容を伝えることが最も大切です。前方互換性の取組みには、あらゆる環境下で情報の伝達を確保するというアクセシビリティ的な意味合いも含まれているということを覚えておいてください。
ブラウザの表示モードとは
IE6以降、Firefox、Netscape6以降、Opera7以降、Safari、MacIE5などの比較的新しいブラウザは「標準モード」と「互換モード」の２種類、または、これらに「ほぼ標準モード」を加えた3種類の表示（レンダリング）モードを備えています。このような仕組みは、過去に作られたWebページもこれまで通りに表示することができ、Web標準に準拠した新しいWebページは、仕様に沿った表示がされるよう用意されたものです。
標準モード（standards/full standards）
「標準モード」は、Web標準に準拠した表示を行うモードです。仕様に沿っていない記述は無視されます。前方互換性を意識してWeb標準に準拠したWebページを表示する場合には「標準モード」を使用します。
互換モード（quirks）
「互換モード」は、バージョンの古いブラウザと互換性を持たせた表示モードです。後方互換性を意識して作られたページを表示させたい場合には、こちらのモードを使用します。Web標準に準拠した妥当なCSSを書かなくてもブラウザ独自の解釈で、その間違いを補完して表示してくれます。ただし、その解釈はブラウザごとに異なるため、クロスブラウザな表示を実現するのは難しくなります。また、標準に準拠したWebページであっても、過去の表示と同じく、仕様と異なる解釈がされることがあります。
ほぼ標準モード（almost standards）
「ほぼ標準」モードは、「互換モード」と「準拠モード」に追加された新しい表示モードで、Firefox、Netscape7/8、Safariなどに搭載されています。「ほぼ標準」モードは、基本的に標準モードと同じですが、テーブルのような一部の表示のみ後方互換性を維持したモードです。
