CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

ボックスモデルとは

 「標準モード」と「互換モード」の違いが顕著な例として、ボックスモデルが挙げられます。ボックスモデルとはブロックレベル要素がもつ内容、パディング、ボーダー、マージンから構成される矩形領域の概念です。この概念は、CSSデザインをする上で必要不可欠なものです。また、クロスブラウザなデザインを実装するうえで、つまづきやすいポイントでもあるので、ぜひ押さえておきましょう。

ボックスモデル概念図
ボックスモデル概念図
  • 内容領域(content):テキストや画像などが表示される領域
  • パディング(padding):内容とボーダーの間の余白
  • ボーダー(border):パディングの外側にある枠線
  • マージン(margin):ボックスの最も外側にある、他の要素との余白

ボックスモデルで見る表示モードの違い

 では実際に、「標準モード」と「互換モード」での表示の違いを見てみましょう。p要素に対し、次のようなスタイルを適用させてみます。

CSSのソース
p{
width:200px;
height: 200px;
padding:10px;
border:20px #00f solid;
}

 これをIE6の「標準モード」と「互換モード」で表示した結果は次のようになります。

標準モードで表示:
標準モードで表示:
互換モードで表示
互換モードで表示

 仕様上では、ボックスの幅と高さは、内容の幅と高さとなっています。「標準モード」であれば、意図したように表示されるはずですが、IE6の「互換モード」では、ボーダーとパディングも含めたものをボックスの幅や高さとして解釈しています。

 このように、せっかく前方互換性を意識したWebページを制作しても、ブラウザの表示モードが「互換モード」になっていると、意図した結果が得られにくくなります。

標準モードのススメ

 ここではボックスモデルを例にとりましたが、他にも、フォントサイズやブロックレベル要素のセンタリングなど、「互換モード」のCSSの解釈は、標準の仕様とは異なる部分が多くあります。「互換モード」では、ブラウザごとにスタイルの実装方法が異なってくるため、それぞれに合わせたスタイルを適用させる必要がでてきます。その分、工数は増えますし、保守性も悪くなってしまいます。

 結論から言うと、クロスブラウザな表示を実現する一番の近道は、各ブラウザの表示モードを「標準モード」に統一することです。Web標準に従ってWebページを制作し、ブラウザには、仕様通りの解釈してもらうのが賢明だと言えるでしょう。

 なお、あえて互換モードを採用する場合や、過去のブラウザにおけるボックスモデルバグに対応したい場合の対処方法については、以降の連載の中で紹介していく予定です。


  • 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