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

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

この記事を読むのに必要な時間:およそ 2 分

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⁠)

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

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

※4)
ブラウザ別,DOCTYPEスイッチ一覧表がまとまっているこちらの資料を参考にしてください。
※5)
HTML/XHTMLのバージョンについては,制作するサイトの目的により適切なものを選ぶことになります。
※6)
具体的な事例は,以前私が講演させていただいた資料でも掲載していますので参考にご覧ください。

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/