CSSレイアウト

Internet Explorerについて

ちょっと話は変わります・・・現在、世界的なブラウザのシェアのNo1はInternet Explorerです。その中でもWindowsのInternet Explorer 6のシェアが圧倒的です。また、一つ前のバージョンIE 5.5を使用している方も居ます。

現在のInternet Explorerの最新版はVersion 8です。IE8, 1つ前のIE7は、Windows Vista, XPに提供されています。しかし、IE6のシェアは低くなったものの、まだゼロではないようです。

これらのブラウザは、CSS1、CSS2（一部）を正確に理解してくれる・・・と嬉しいのですが、実はそうではありません。重大なバグ（仕様？）を持っています。

その中でも、特に問題となるのが、ブロック要素のセンタリング、ブロック要素のボックス解釈についての２つでしょう。

ブロック要素のセンタリング

前に、ブロック要素のセンタリングは、センタリングしたい要素にmargin-left: auto; margin-right: auto;を指定すれば良いと書きました。しかし、Internet Explorer の場合は、これだけではセンタリングを行ってくれません。

IEでブロック要素のセンタリングを行うためには、センタリングをしたい要素の親要素にtext-align: center;を指定します。これは、IEの仕様によるものです。通常（CSSの規定通りならば）、text-alignはブロック要素のセンタリングは行いません。

したがって、IE以外のためのmargin-left: auto; margin-right: auto;とIEのためのtext-align: center;を両方使用する必要があります。

センタリング対象 （IE以外のため）
margin-left: auto;
margin-right: auto;
width: ####;（任意の幅を指定する必要がある）
センタリング対象の親要素（IEのため）
text-align: center;

ブロック要素のセンタリング

Internet Explorarのボックス解釈

IEとそれ以外のブラウザので何が違うのか・・・一番大きな問題は、width・heightプロパティで指定する値はパディング・ボーダーの幅を含んでいるということです。

IEとその他のブラウザの比較

上の絵はイメージ図です。パッと見て、違いがわかりにくいです。今度は、以下のCSSを適用させたdiv要素のスクリーンショットを比較してみます。

<div class="box">A</div>

.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px;
  border: 10px solid #555;
}

マージンは分かりやすいように薄いグレーで着色してあります。また、２枚目の画像は、width, heightプロパティで大きさを指定した部分を赤く着色して示してあります。

IE,Firefoxの比較 width,heightで大きさを指定した部分を赤で表示

同じように指定しても、これだけ差が出ます。では、どのようにしたら、どのブラウザでも同じように表示できるでしょうか？

考え方は、「複数のボックスに分割する」ということです。以下にその例を示してあります。（今回も分かりやすいようにマージンは薄いグレーで色付けしてあります。）

<div class="box3">
  <div class="box2">
    <div class="box1">A</div>
  </div>
</div>

.box1 {
  width: 40px;
  height: 40px;
}
.box2 {
  background: #fff;
  border: 10px solid #555;
  padding: 20px;
}
.box3 {
  width: 100px;
  height: 100px;
  margin: 20px;
}

３つのdiv要素で表現した場合の比較

・・・面倒くさいですね。これは、試行錯誤して慣れるしかないでしょう^^;

ただ、ホームページは縦方向に伸びていくという性質があります。文章が長くなってくれば、必然的にそれを囲んでいるブロック要素は下に長くなっていきます。したがって、ブロック要素に高さを無理やり指定するような機会はほぼ無いでしょう。高さを指定すると、横スクロールバーを出現させる原因になりますし。

横スクロールバー：画面を横方向にスクロールするためのバーのことです。横方向に伸びたページは操作性が悪く、読みにくいため、あまり好まれるものではありません。

では、高さをしない場合を考えて見ましょう。例えば、下の図のようなボックスを考えます。

高さを指定しないボックス

この場合、CSS2の定義に従った形で書くと、以下のようになります。

box {
  margin: 20px;
  padding: 10px;
  border: 5px solid #666;
  width: 170px;
}

<div class="box">
  本文 本文 本文 本文 本文 本文 本文 本文 本文
</div>

上のCSSを適用させたブロック要素は、下のスクリーンショットのように表示されます。

ブラウザでの表示結果

では、IEとFirefoxの表示を同じにする（Firefoxと同じように表示させる）には、どのようにしたら良いか、考えて見ましょう。

ポイントは、高さを指定する必要は無い、ということ。２つブロック要素を使うと同じように表示することができるようになります。

.box1 {
  margin: 20px;
  width: 200px;
}
.box2 {
  padding: 10px;
  border: 5px solid #666;
}

<div class="box1">
  <div class="box2">
    本文 本文 本文 本文 本文 本文 本文 本文 本文
  </div>
</div>

IEもFirefoxも同じように表示されているのが確認できます

絶対に覚えておく必要があるのは、width と border, padding を同時指定しないという事。逆に、 width と margin は同時に指定しても大丈夫。また、width を指定しないのならば、margin, padding, border を同時に指定しても大丈夫。そのために、２つのブロック要素に分けて指定してあるのです。

一つの要素に指定しても大丈夫な組み合わせ（例）

  • margin と padding
  • margin と width
  • border と padding
  • border と margin と padding

一つの要素に指定すると表示が違ってしまう組み合わせ（例）

  • padding と width
  • border と width
  • margin と width と padding
  • padding と width と border

さて、これでどのブラウザでも同じように表示されるレイアウトができるようになるはずです。では、マージン・パディング・ボーダーを含んだちょっと応用的なレイアウトをやってみましょう！

現在のブラウザは、DOCKTYPE宣言の有無などで、ブラウザの表示モードを切り替えているものがあります。（Gecko系、Operaなど）Internet Explorer も、IE6（Win）・IE5（Mac）から、この切り替えをサポートしました。

これらのブラウザは、DOCKTYPE宣言が正しいものであれば、標準モードというW3Cが取り決めるHTML・CSSのルールに従った描画を行うモードに切り替えます。また、宣言が正しくないものであれば、互換モードといった、曖昧な表記もそれなりに表示してくれる・・・そんなモードに切り替わります。

IEは、標準モードであれば、センタリングもボックス解釈も正常に行います。

ただ、IEのモードの切り替えの判断が、とても適当な基準を元に行われているために、正しいDOCKTYPE宣言があるにもかかわらず、互換モードになってしまう場合があります。

そのために、上で述べてきたような互換モード特有のバグ（仕様）によって、レイアウトが崩れることがあるのです。

詳しくはこのホームページでは解説していませんので、ご自分で検索してみてください。（ヒント：「標準モード」「互換モード」「InternetExplorer（IE）」）