メディア掲載_Web Designing

Web Designing 2012年10月号

執筆:高田寛子 執筆:高田寛子

CSSLab.2012年10月号

IE6対応のための定石CSSハック

さまざまなブラウザがバージョンアップを行っていく中で、いまだにIE6対応についての要望は多い。IE6で注意すべきトラブルは約6パターンほどあるが、今回はその中でも代表的な3種類を覚えるとともに、CSSを使って問題を解決しよう。

なぜIE6対応がいまだに求められるのか?

アクセス解析サイト「W3Counter(01)」で世界的なブラウザのシェア率を見てみよう。今年7月の時点で、すでにIE6はランキングから消えており、世界的に見るとIE6のシェアはかなり低くなっていることがわかる。IE6でWebを閲覧するユーザーはほとんどいないと言えるだろう。

01アクセス解析「W3Counter」

W3Counter

http://www.w3counter.com/globalstats.php

■ Webブラウザのシェア(2012年7月 W3Counterより)

1位
Chrome20(24.3%)
6位
Firefox14(6.55%)
2位
IE9(12.16%)
7位
IE7(4.71%)
3位
IE8(10.75%)
8位
Android4(2.16%)
4位
Safari5.1(9.31%)
9位
Safari5(1.97%)
5位
Firefox13(9.07%)
10位
Firefox12(1.92%)

IE6のシェアは10位圏外、7月の段階で0.9%ほど。1%以下であればIE6対応は無視してもいいような気がするが‥‥

■ OSのシェア(2012年7月 W3Counterより)

1位
Windows 7(44.1%)
2位
Windows XP(27.06%)
3位
Mac OS X(8.66%)
4位
iOS(7.09%)
5位
Windows Vista(6.95%)

世界中で使用されているOSの中でWindows XPのシェアは27.06%と高い。ちなみにXPの初期ブラウザにはIE6が採用されている

このデータからIE6対応も必要ないのではないかと思うかもしれない。しかし日本国内では、社内システムの関係からバージョンアップできず、IE6のまま使っているところもいまだに多いというのが実情だ。OSのシェア第2位のWindows XPの初期ブラウザがIE6ということもあり、慎重になるクライアントもいるようだ。IE6のシェアに絞って見てみると、日本は中国に続いて世界2位(4.7%)であり(02)、まだしばらくはIE6の存在は消えそうにない。
実際、筆者が関わる案件の半数は、ターゲットブラウザにIE6を含んでいる。幅広いユーザーが訪れることを想定しているWebでは、クライアントからIE6の検証を希望されることが多いのだ。今回はIE6対応で障壁となる代表的なトラブルとその対策について、あらためて解説したい。

02IE6からのバージョンアップを促す「The Internet Explorer 6 Countdown」

The Internet Explorer 6 Countdown

2012年7月現在、IE6のシェアは日本は第2位(4.7%)http://www.ie6countdown.com/

IDEA1 float時にmarginが2倍になる問題

IDEA1 float時にmarginが2倍になる問題

IE6の代表的なトラブルの一つに、floatを設定した時にマージン値が2倍になる不具合がある。まずはそれについて解説していこう。

DOCTYPE宣言に2つのモード

DOCTYPE宣言には、DOCTYPEの前にXML宣言を加える後方互換とHTMLの場合の標準準拠という2つのモードがあり、代表的なIE6の非互換や不具合は、後方互換モードを使用した場合に起こりやすいようだ(01)。ただ、条件によってはどちらのモードでも問題が発生するので、標準準拠モードの場合でも確認が必要だ。

01HTMLソース

01 HTMLソース

今回のサンプルではDOCTYPE宣言の前にXML宣言(A)がある後方互換モードを採用している

marginを正しく表示する

グローバルナビゲーションなどでメニュー画像が横並びに配置されているデザインをよく見かける。こういったレイアウトは主にfloatを使い、要素間にある空白をmarginなどで調整しているのだが、IE6では02のようにmarginが2倍になってしまうという不具合が発生する。
この問題は要素に対して「display:inline;」を加えて、インライン要素にすることで解決すよう。これでmarginの値は指定通り20pxになる(03)。
displayプロパティを加えることで表示に変化がないか不安なところだが、IE6ではfloatをかけた要素に対してdisplayプロパティは無視されるため、表示上の影響はないので安心してほしい。他のブラウザでも表示上の問題は確認されていない。用心するのであれば、アンダースコアハックなどを利用しよう。

02表示サンプル

marginを正しく表示する

floatした時の要素のmarginが勝手に2倍になってしまう。サンプルではマージンの値を20pxに設定したが、IE6で見るとその倍の40pxのスペースが表示されている

02CSSソース

CSSソース

「float:left;」と同じ方向にmarginをかけるとナビゲーション画像の左側にmarginが2倍の大きさになる

03CSSソース

CSSソース

修正版のCSSソースコード。displayプロパティ「display: inline;」を加えるだけでmargin値は正しく表示される

印刷時のトラブル防止策

floatを使ってサイトの横幅いっぱいに要素を並べる場合、IE6やIE7では印刷時にレイアウトが崩れやすい。ナビゲーションなどは、CSS Spriteが使えるのであれば、そちらを使用したほうがいい。

IDEA2 段差ができる問題の回避方法

IDEA2 段差ができる問題の回避方法

floatを使って要素を横並びに表示する場合、floatを設定する場所を間違えると、階段状のレイアウトになってしまう場合がある。これもIE6の不具合によるものだ。

階段状に表示されるa要素

今回のサンプルではa要素に対してfloatをかけた場合、本来横並びに表示されるはずが、IE6では01のように階段状に配置されてしまうバグがある。
IDEA1では、メニュー用の画像を横並びに配置するだけだったが、今回はa要素に対してサイズ指定や装飾を行う。この不具合はこういった場合に発生しやすい。ちなみに、HTMLはIDEA1と同じもの使用している。
a要素を「dispaly:block;」を使ってブロック要素にする時は、横幅や高さなどの指定だけにして、a要素の親要素、つまりこの場合li要素にfloatを設定する(02)。こうすることで階段状に表示される問題は解消される。
floatを設定する位置によってこのような問題が起こるため、a要素に対してはfloatを設定しないほうがいいだろう。親要素・子要素の関係を意識することが重要だ。

01表示サンプル

階段状に表示されるa要素

3つのa要素をfloatを使って横並びに配置するはずが、IE6で見ると段差ができてしまう

01CSSソース

CSSソース

a要素をblock要素にした場合(B)、そのa要素に対してfloatを設定すると(C)、配置が階段状になる不具合が発生する

02CSSソース

CSSソース

修正版CSSでは、a要素(B)にはfloatを設定せず、a要素の親要素(この場合li要素・A)に対してfloatを設定した

02表示サンプル

階段状に表示されるa要素

CSS上でfloatプロパティを親要素に移動するだけで表示の崩れは解決する

IE7でも起こるバグなので注意

ここで紹介するものも含め、IE6上での非互換性や問題については、以降のIEでずいぶんと改善された。しかし、いくつかの不具合は、IE7では解消されていない。 念のため、IE6で問題が起こった場合には、併せてIE7も検証するようにしよう。

IDEA3 IE6はブロック要素の解釈が異なる

IDEA3 IE6はブロック要素の解釈が異なる

IE6はブロック要素内のmargin、padding、borderの捉え方が、他のブラウザとは異なる。クロスブラウザ対応にするには、IE6に対して施策が必要だ。

ブラウザで異なるブロック要素の解釈

ブロック要素に対する解釈がIE6のみ異なるので、サイズを指定する場合には注意が必要だ。通常、ブロック要素内でサイズ指定を行う場合は、ブロック要素を形成するmarginやpadding、borderを除いた部分の大きさを指定するが(01)、IE6の場合はサイズ指定をするとpaddingとborderまでを含んだものとして解釈する(02)。そのため、IE6で同じサイズのものを表示させるには、サイズ指定をpadding、borderを含めたサイズにしなくてはならない。

01ブロック要素の解釈

ブラウザで異なるブロック要素の解釈

サイズを600pxに指定した場合、IE7以降、またはその他のブラウザであれば赤く囲んだ部分を指定したことになる

02ブロック要素の解釈(IE6の場合)

ブラウザで異なるブロック要素の解釈

IE6の場合、サイズ指定を行うとborderやpaddingまでを含む(赤く囲んだ部分)。01と同じサイズで表示するためには、横幅を614px(600+5×2+2×2)に指定しなくてはいけない

アンダースコアハックで対応

IE6のバグを解決する方法として有名なのが「アンダースコアハック」だ。今回のトラブルに利用してみよう。03のように、IE6用プロパティの前に「 _ 」を置くだけで振り分けができる。
プロパティの前に特殊な記号がある場合、IE6では読み込むが、IE7以降とその他のブラウザはそのプロパティを無視するという、IE6の特性(バグ)を利用したものである。 ただし、文法的には正しくないので、アンダースコアハックを使ったCSSを「W3C CSSValidator(04)」で検証するとエラーになる。したがって「W3C CSS Validator」によるチェックを重視する場合は、他の解決方法を探す必要がある。

03CSSソース

CSSソース

横幅を600pxに指定(A)。IE6の場合は同じclassの指定内でプロパティの前に「 _ 」を置くアンダースコアハック(B)を使うことでトラブルを回避できる

04URLを入力してCSSの検証を行う「CSS Validation Service」

CSS Validation Service

http://jigsaw.w3.org/css-validator/

CSS3でも同じ解釈でサイズ指定可能

IE6のようなブロック要素の解釈は、実はCSS3でも利用できる。ボックスの算出方法を「box-sizing: border-box;」とすることで、paddingとborderまでを含めたサイズ指定ができるのだ(05)。

05CSSソース

CSSソース

ボックスのサイズの指定方法を決めるboxsizingプロパティ(A)を使えば、IE6の時と解釈でサイズ指定ができる。この記述方法でも01と同じサイズのブロック要素が表示される

お問い合わせはこちらからどうぞ