CodeZine(コードジン)

特集ページ一覧

「ブラウザの表示モード」を理解してクロスブラウザなレイアウトを実現する

クロスブラウザなレイアウトデザインテクニック 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/05/22 14:00

目次

表示モードを切り替えるには

 さて、いよいよ本題です。表示モードの切り替えはどのようにして行われるのか、どのようにして表示モードを統一するのか、その方法をみていくことにしましょう。

DOCTYPEスイッチ

 ブラウザが持つ複数の表示モードは、文書型(DOCTYPE)宣言の書き方によって切り替わる仕組みになっています。このような仕組みは「DOCTYPEスイッチ」と呼ばれています。

 基本的には、標準に沿った適切な文書型宣言をすれば、「標準モード」となり、文書型宣言をしない場合には「互換モード」が適用されるという単純な仕組みになっています。けれども、ブラウザの種類やバージョンによって、その切り替え方法に若干の違いがあるため注意が必要です。

HTML4.01を採用する場合

 まず、文書にHTML4.01を採用する場合から見ていきましょう。HTML4.01では、文書型宣言の中のシステム識別子の有無が表示モードの切り替えに関係してきます。

 下記のHTML 4.01 Transitional DTDにおける文書型宣言の例では、DTDのURIを示した"http://www.w3.org/TR/html4/loose.dtd"という記述部分がシステム識別子にあたります。

HTML 4.01 Transitional DTDの文書型宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

 HTML4.01では、Web標準のルール上、システム識別子を省略することができますが、これを省略しないで書いておけば、ブラウザの表示モードを「標準モード」または「ほぼ標準モード」にすることができます。

 また、Firefox、Netscape7/8、Safariにおいて「標準モード」が採用されるのは、Strict DTDの場合に限られており、Transitional DTDやFrameset DTDの場合には、システム識別子を記述しても、「ほぼ準拠モード」が採用されるようになっています。したがって、HTML 4.01において、すべてのブラウザを「標準モード」に統一したい場合には、Strict DTDを採用しましょう。

  • HTML 4.01 Strict DTDの場合、システム識別子の有無に関わらず、すべてのブラウザで「標準モード」になる
  • HTML 4.01 Transitional DTD/HTML4.01 Frameset DTDの場合、システム識別子があれば、「標準モード」または「ほぼ準拠モード(Firefox、Netscape7/8、Safari)」になり、システム識別子が無ければ「互換モード」になる

XHTML1.0/XHTML1.1の場合のDOCTYPEスイッチ

 XHTMLの場合、Web標準のルール上では、システム識別子を省略することは許されていません。XHTMLの場合は、後述する特殊な例外を除き、文書型宣言を記述しさえすれば、「標準モード」または「ほぼ準拠モード」になります。HTML4.01同様、Firefox、Netscape7/8、Safariでは、XHTML1.0 Strict DTDまたはXHTML1.1の場合に限り「標準モード」が採用され、XHTML1.0 Transitional DTDやXHTML1.0 Frameset DTDの場合には、「ほぼ準拠モード」が採用されます。

 さて、先に述べた特殊な例外とは、IE6の表示モードに関するバグです。

Win IE6の表示モードに関するバグ

  IE6には、文書型宣言の前に何らかの文字列があると、互換モードが採用されるというバグがあります(IE7では解消されています)。

 ここで問題となってくるのが、文書の先頭に記述するXML宣言です。XML宣言を記述してしまうと、IE6では互換モードが採用されてしまうため、他のブラウザと表示モードの統一を図ることができなくなってしまうのです。また、IE6ほどのシェアはありませんが、Opera7.0-7.03についても、XHTMLでXML宣言がある場合に「互換モード」が採用されてしまうという問題があります(Opera7.1以降では解消されています)。

 これらの解決策としては、単純に、「XML宣言を記述しない」という方法を取るのが一般的です。

 W3CのXHTML1.0仕様書第2版では、XML宣言の記述について、「文書の文字コードセットがUTF-8もしくはUTF-16以外で、サーバ側で文字コードセットを指定できない場合にXML宣言が必要」とされています。言い換えれば、文字コードセットをUTF-8またはUTF-16にする、あるいは、サーバ側で文字コードセットを指定した場合には、XML宣言を省略することが許されているというわけです。

ブラウザのDOCTYPEスイッチ一覧(PDF)
ブラウザのDOCTYPEスイッチ一覧(PDF)

まとめ

 CSSを使ったクロスブラウザなデザインを実現するための第一歩として、今回は、「表示モード」について解説しました。次回からは、表示モードを統一してもカバーすることのできない「ブラウザの実装差異」について解説し、それを補う方法としてCSSハックを紹介していきます。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5