gihyo.jpサイトのロゴ

独学で極める “Webデザイン”の技と心

第8回クロスブラウザ対応CSSでつまずかない

2008-03-03

前回はサンプルを交えながら(X)HTMLとCSSの関係をおさらいしました。どれだけ画像を沢山利用したグラフィカルなサイトでも、画像を使わないシンプルなサイトでも基本はまったく同じであり、(X)HTMLは文書構造を、CSSでは文書の要素に対して見た目等の振る舞いを指定することにより、ブラウザで私たちが閲覧できる状態になります。

ところがリファレンス等を参考にしながら正しく(X)HTML/CSSを書くように頑張ってみたわりには、ブラウザ（閲覧環境）によっては表示が崩れてしまうなど、最初はなかなか思い通りに表示されないことが多いものです。

W3Cが技術を標準化するため(X)HTMLやCSSの仕様書を勧告していますが、現実に普及しているブラウザでは、仕様に完全準拠しているとは限りません。そのため、普及しているそれぞれのブラウザの特徴まで理解した上で(X)HTMLとCSSの設計をすることが必要です。

ブラウザの特徴を理解とは言っても、難しく考える必要はありません。

(X)HTMLとCSSを書く上での基本ワークフロー

  1. まず第一に比較的仕様に忠実な新しいブラウザを使って動作確認を行うようにする
  2. 最後の仕上げの段階に古いブラウザ（仕様サポートが不十分なブラウザ）との表示の差を埋める

この基本のワークフローを守り、きちんと理想の状態で組み立ててから現実にあわせるテクニックで補うことが大切です。

ブラウザ表示の差を埋めることを楽しめるようになってしまおう

私が今までに独学で(X)HTMLやCSSを学んできて、各種ブラウザの表示の差異を埋めることの学習こそが一番時間のかかるものなのではないかと思うくらい、Internet Explorer6以前のブラウザ対応には手をやいてきました。

全てのブラウザで仕様どおりに忠実に表現されるものだとしたら、(X)HTMLとCSSはもっともっと簡単になると思います。もちろんそれが本来理想とするところでもあるのですが、実は各種ブラウザの表示不具合があるからこそ解決できたときの楽しみが大きいと言う見方もあります（私自身もそう思っています⁠）⁠。勉強すればするほど、なかなか思い通りに動いてくれないブラウザすらも可愛らしいものと思えてしまうほどです。

ただし、ブラウザの表示の差異を埋めるテクニックには「標準」「⁠仕様」という観点から見てバッドノウハウとされるものも多くあることを頭の片隅に置いておいてください。

まずは比較的Web標準に準拠した新しいブラウザ[1]を使ってページを制作していきましょう。

他のブラウザと比較して思うようにいかなくなってしまう原因

つまずくと思われる点は、大きく分類してこの3点ではないかと思います。

  1. レイアウトが崩れる
  2. 予期しない空白ができてしまう
  3. フォントサイズが揃わない

今回は一番問題が大きく感じられる「1．レイアウトが崩れる原因」について解説します。

レイアウトが崩れる原因のほとんどが、(X)HTML文書のDOCTYPE宣言の違いによってレンダリングモードが変わることによるものです。

DOCTYPE宣言とは、平たく言えば「(X)HTMLのバージョンと仕様はこれですよ」と宣言する記述のことです。

仕様通りに正しく書かれた(X)HTMLのソースを覗いてみてください。文書の一番先頭に、 例えば以下のような記述がされています。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

これらがDOCTYPE宣言です（上の例はXHTML1.0 Transitional、下の例はHTML4.01 Strictです[2]⁠）⁠。

そのDOCTYPE宣言は、それぞれ(X)HTMLのバージョンごとに記述が決まっていますが、CSSの解釈が乏しいブラウザと互換性を保つために、ほとんどのブラウザで

  • 標準準拠(standards)モード = CSSを仕様通り解釈するモード
  • 後方互換(quirks)モード = CSSの間違った解釈をするモード

を簡単に変更できるようにするためのスイッチが用意されています。

これをDOCTYPEスイッチ[3]と言います。

DOCTYPEスイッチ

DOCTYPEスイッチは、標準準拠モード（正しい解釈）では「width(幅)⁠」⁠・「⁠height(高さ)」は(padding/borderを含まない)内容領域を指定するものです。

画像

互換モードでの「width(幅)⁠」⁠・「⁠height(高さ)」の解釈は、内容領域+paddingの値+borderの値を含めた寸法を「width(幅)⁠」⁠・「⁠height(高さ)」と解釈してしまいます。

画像

ところが困ったことに、Internet Explorer6 においては、XHTMLの1行目がXML宣言から開始されていると、本来は標準準拠モードでレンダリングを行うはずが、後方互換モードに切り替わってしまうという有名なバグがあります。

このため、レイアウトに影響する「width(幅)」や「height(高さ)」の解釈がずれてしまうのです。

解決方法

この問題（ボックスモデルの解釈の違いに関する問題）を解決する方法は複数ありますが、それぞれのメリットとデメリットを理解した上で解決方法を選びます。

  1. DTDを明示したHTML4.01[5]にするか、XML宣言のないXHTMLにする
    メリット：
    • ほとんどのブラウザにおいて標準モードで統一されるため、CSSを記述が正確でシンプルになる[4]
    • 標準モードでレンダリングされるため、CSSがクリーンになる
    • 文書がXHTMLである必要がない場合、もともとこの問題自体がない
    デメリット：
    • そもそもXHTML文書にはXML宣言を記述することを仕様で強く推奨されているので好ましくない
  2. XML宣言のあるXHTMLで記述した上で、バグによって互換モードになってしまうブラウザ用にCSSを上書きする
    メリット：
    • XHTMLの仕様に忠実に、宣言すべきXML宣言を挿入できる
    デメリット：
    • 互換モードになってしまうブラウザ対策に、わざと間違ったCSSの記述をしなければならない箇所が出てきてしまう（いわゆるCSSハックの出番[6]⁠）

今回はブラウザ間で発生する見た目の差異の原因の代表例として、標準／互換モードの違いによって生じる幅と高さの解釈の違いをあげました。

幅と高さ以外の他の事例（フォントサイズの問題など）についても、今後この連載で取り上げる予定です。

おすすめ記事

記事・ニュース一覧