Dreamweaver 使いから見た Expression® Web

#7
Internet Explorer 8 への対応

鷹野雅弘

株式会社スイッチ。Web サイトの構築やコンサルティングを行う傍ら、Web や DTP に関するトレーニングや執筆活動を行う。著書に『できるクリエイター Dreamweaver 独習ナビ』 (インプレス)、『Illustrator CS2 完全制覇パーフェクト』 (翔泳社) など他多数。CSS Nite を主宰。

... Session #1
... Session #2
... Session #3
... Session #4
... Session #5
... Session #6
... Session #7
... Session #8
... IE8 の新機能を実装する

Internet Explorer 8 Beta 2 日本語版が公開されて、いよいよ、Internet Explorer 8 (以下「IE8」) 対応に取り組まなければならないタイミングが近づいてきました。
今回は、Internet Explorer 8 への対応、および、Expression Web 2 のアドバンテージについて取り上げます。

IE8 のゴールは、CSS 2.1 完全準拠

エンドユーザーのブラウザ体験としての IE8 には、サイトの一部の更新状況を自動的にアップデートする「Web Slice」といった目玉機能が用意されていますが、私たち Web 制作者、なかでもマークアップ関係者には、IE8 のレンダリング性能が気になるところです。

Web 標準準拠という流れは、IE7 でも行われていましたが、IE8 の新しいレンダリングモード「IE8 標準モード」では、CSS 2.1 への完全準拠がゴールとされています。

古いベータ版をインストールする際には、最初にアンインストールしておこう。

これは、すなわち過去のバージョンの IE に依存したサイトとの互換性の保持が問題になります。
つまり、レイアウトの崩れなどが生じる可能性がある、ということです。

IE8 のレンダリングモード

IE8 では、レンダリングモードを切り替えるための meta スイッチが導入されています。
たとえば、

このように記述すると、明示的にレンダリングモードを切り替えることができるのです。

IE=8	IE8 標準モード
IE=7	IE7 標準モード
IE=5	Quirksモード
IE=edge	一番新しいエンジンで描画 (IE8)
IE=emulateIE8	IE8 標準モードか互換モードかを DOCTYPE で判別
IE=emulateIE7	IE7 標準モードか互換モードかを DOCTYPE で判別

開発環境でのモード変更

meta スイッチが記述されているときには、そちらが優先されますが、それ以外の場合には、これまで通り、DOCTYPE スイッチが使われ、何も記述していない場合、および、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

を

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

このように、URL なしで記述した場合のみ互換表示となります。

テスト環境では、DOCTYPE スイッチや meta スイッチの記述を変更せずに切り替えたいというニーズが生じます。この場合には、IE8 を起動後、[ツール] - [開発者ツール] をクリックすると起動される「開発者ツール」が用意されています。

「開発者ツール」は別ウィンドウで開きます。
[F12] キーで起動することもできます。

IE8 非対応のページを開く際には、「開発者ツール」の [ドキュメントモード] から、[Internet Explorer 8 標準]、[Internet Explorer 7]、[Quirk モード] を切り替えることができるのです。

[ドキュメントモード] からのモード変更。
このほかにも制作者にとって有益な機能がたくさん用意されています。

制作時の要注意ポイント

ここまでは、IE8 のレンダリングモードについて解説してきましたが、ちょっとやっかいなのはイントラネット、および、ローカルファイルは、互換モードで表示されてしまうという点です。

回避方法は 2 つです。
[ページ] - [互換表示設定] をクリックし、[互換表示でイントラネットサイトを表示する] のチェックをはずします。

Internet Explorer 8 のみで設定するには、[互換表示設定] を変更します。

Microsoft Expression 開発サーバー

2 つ目の回避方法が「Microsoft Expression 開発サーバー」を使う方法です。
Expression Web 2 と同時にインストールされる「Microsoft Expression 開発サーバー」を使うと、アドレスが「C:\Users\tanaka\Documents\....」でなく「http://localhost:4672/mysite/abc.html」のようになるため、互換モードで表示されることはなくなるのです。