最終回となる今回は、Internet Explorer 7（IE7）のレンダリング機能、すなわちHTML、CSS、JavaScriptの処理と表示に関する改善点と注意点を紹介しよう。CSSで機能が大幅に向上したのは嬉しい限りだが、気を付けなければいけない点もいくつかある。

■大幅に改善されたCSS対応

　レンダリング機能のうち、IE7で大幅に改善された点は、CSSの標準仕様への対応だ。これまであった、「FirefoxやOpera、Safariでは正しく表示されるのに、IEは対応していない」といった効果も使えるようになった。例えば、positionプロパティの値fixedにようやく対応したことで、「スクロールしても動かないメニュー」のような効果を出すことができる。サンプルページを用意したので、IE7でページをスクロールさせるとどうなるかを確認してほしい。

　また、background-attachmentプロパティの値fixedに正しく対応したことで、「固定した背景画像」の効果を使って複雑なデザインを作れるようになった。Eric Meyer氏による「Complexspiral Demo」を参照してほしい。

　そのほかに、IE7でCSSの表示が改善された点は、次のとおり。

• 子供セレクタ（A > B）、隣接セレクタ（A + B）、属性セレクタ（A[attr="val"]）に対応
• 属性セレクタでは、CSS2の書式に対応し、CSS3の書式にも一部対応（A[attr^="val"]、A[attr$="val"]、A[attr*="val"]）
• 擬似クラス「:first-child」に対応
• 擬似クラス「:hover」をa要素以外にも使えるようになった
• widthプロパティやheightプロパティでサイズを固定したとき、はみ出しの表示がCSSの仕様どおりになった
• min-width、max-width、min-height、max-heightの各プロパティに対応

　子供セレクタなどに対応したことで、ブラウザごとの違いに対応するためのトリッキーな「CSSハック」はIE7では意味がなくなっている。

　また、CSSと関連する機能としては、XML宣言（）の問題が改善された。これまでは、XML宣言を記述したページの表示モードが必ず過去互換モード（quirks mode）になってしまったが、IE7では標準準拠モード（strict mode）で表示できる。

　HTMLでは、長らく対応していなかったabbr要素に対応したほか、入れ子にしたobject要素が問題なく表示されるようになった。

IE7で見たサンプルページ	IE7で見た「Complexspiral Demo」

■Web制作者が気を付けること

　メジャーなブラウザであるIEがバージョンアップしたといっても、ほとんどのWeb制作者には影響はないものと思われる。特に、CSSを使わずに昔ながらのテーブルによるレイアウトを行なっているサイトでは、IE7で表示がおかしくなることはまずない。サイトの表示を細かくチェックしなければならないのは、デザインをCSSで組み立てている場合や、CSSを操作するJavaScriptを使っている場合だろう。

　次に、IE7で特に注意する点について簡単に述べよう。

・ユーザーエージェント文字列

　IE7では、ユーザーエージェント文字列の「MSIE 6.0」の部分が「MSIE 7.0」に変更された。JavaScriptやCGIでバージョン番号をチェックしている方は気を付けてほしい。「バージョンが6の場合は～」のようなスクリプトを書いていたら、「バージョンが6以上の場合は～」や「バージョンが6の場合は～、7の場合は～」のように変える必要がある。

・width、heightプロパティとはみ出し表示

　IE7ではCSSのwidth、heightの両プロパティの効果がCSSの仕様どおりになった。つまり、IE6までの「内容がはみ出したら自動的に広がる」ではなく、「内容がはみ出したらはみ出して表示させる」ようになった。ブログなどでこの2つのプロパティを使っている場合は、チェックが必要になる。これについてもサンプルページを用意したので、ブラウザのサイズを変更するとどうなるかを確認してほしい。なお、ページの表示モードが過去互換モード（quirks mode）の場合は、IE6と同じ表示になる（MSDNのサイトにある「Cascading Style Sheet Compatibility in Internet Explorer 7」を参照）。

・openメソッドを使ったウィンドウ表示

　JavaScriptのopenメソッドでウィンドウを開くとき、「location=no」や「status=no」を指定しても必ずアドレス欄とステータスバーが表示されるようになった。これは、セキュリティ対策の一環として、ユーザーにURLとセキュリティゾーンを常に見せるためと思われる。なお、ローカル上でJavaScriptをテストすると、アドレス欄とステータスバーは消すことができる。そのため、IE7の新しい動作に気付かないことがある。openメソッドを使っている方は、サーバー上で確認してほしい。

IE6（上）とIE7（下）で見たサンプルページ	IE7では必ずアドレス欄とステータスバーが付く

■その他の改善点

　CSSとHTML以外で、IE7で改善された点には、Ajax関連の機能とPNG画像がある。

・XMLHttpRequest

　Firefox、Opera、Safariと同様に、JavaScriptでXMLHttpRequestオブジェクトが使えるようになった。XMLHttpRequestオブジェクトは、JavaScript内でURLを指定してテキストやXMLを読み込むもので、Ajaxの中心となる機能だ。これまでは、ブラウザの違いを吸収するようにスクリプトを書かなければならなかったが、どのブラウザでも同じスクリプトでXMLHttpRequestオブジェクトが動作するようになる。

　と言っても、AjaxページをIE6以前にも対応させるなら、やはりブラウザごとの違いに対応する必要がある。また、IE7とFirefoxなどのXMLHttpRequestオブジェクトは、完全に同じものではない（例えば、IE7にはoverrideMimeTypeメソッドはない）。

・半透明PNGへの対応

　IE7では、アルファチャネル、つまりピクセルごとの透明度の情報を持ったPNG画像を正しく表示できるようになった。半透明PNGに対応している画像加工ソフトはすでに多いので、これまでできなかった半透明効果を試してみるのもいいだろう。用意したサンプルページや、下記のサイト「32-bit RGBA PNGs」で半透明PNGの力を確認してほしい。

IE6（左）とIE7（右）で見たサンプルページ

■改善されていない点

　CSSでは大幅に機能の向上が見られるものの、標準仕様への完全な準拠という点では、IE7は依然としてFirefoxやOperaに追いついていない。IE6からのバージョンアップが5年ぶりであり、次のバージョンアップがいつになるかわからないことを考えると、これは残念なことである。

• CSSのいくつかのプロパティには対応していない。例えば、contentプロパティを使って画像を自動的に表示する、といったことはできない
• name属性の付いたa要素には:hoverは効かない（CSSの仕様に従っていないと言えるが、混乱を避けるためにわざとそうしているとも考えられる）
• HTML4の仕様にあるa要素を使ったイメージマップに対応していない
• JavaScriptでは、DOMの機能に改善が見られない。例えば、addEventListenerメソッドに対応していない
• IE6と同様に、MIMEタイプがtext/htmlのページしかHTMLと見なさない。XHTMLではMIMEタイプをapplication/xml+xhtmlとするのが正しいのだが、対応していない

■IE7の普及速度は？

　Web制作者にとって気になるのは、IE7の実際の普及率だろう。下の表は、筆者が運営している個人的なサイトのアクセスログをもとに、ブラウザのシェアを調べたものだ。訪問者の年齢や性別にあまり偏りのない「普通のサイト」の状況として見てほしい。発表されてから1カ月の段階では、IE7は約3％の人しか使っていない。

　マイクロソフトによると、日本ではWindowsの自動更新によるIE7の配布がリリースから半年後になるとのこと。各国語版では自動更新による配布が始まっているようだが、日本では来年春となる（IE7が搭載されたWindows Vistaの一般向け出荷は2007年1月30日）。IE7が本格的に普及するのは2007年後半以降となりそうだが、自動更新による配布が始まればシェアはやがて50%以上になるだろう。Web制作者は、急ぎすぎず遅すぎずにIE7への対応を進めればいいだろう。

(2006/12/15)

佐藤和人（さとう かずと） フリーライター。ブラウザとHTMLをいじり続けてはや10年。著書に「できるホームページHTML入門」、近著に「基礎Ajax+JavaScript」がある。

- ページの先頭へ-

INTERNET Watch ホームページ

Copyright (c)2006 Impress Watch Corporation, an Impress Group company. All rights reserved.