個別の専用環境を用意することなく、古いIEでの表示確認をしたい

Microsoft製のソフトウェア

Microsoft製のソフトウェア

古いInternet Explorerでの表示確認をしたいとき、わざわざ古いIEがインストールされた環境を1つ1つ用意するのは非常に手間がかかります。

そこで便利なのが、複数バージョンの古いIEで表示確認ができるMicrosoft製ソフト「Expression Web SuperPreview」です。IE6~IE9での見え方を簡単に比較できます。

既に開発は終了しており今後のアップデートはありませんが、無料で公開されおり、古いIEでの表示確認には便利です。自作のウェブページが古いブラウザでも問題なく表示できるかどうかを確認したい場合には、ぜひ活用してみて下さい。


 

「Expression Web SuperPreview」でできること

「Expression Web SuperPreview」の主な機能・特徴は、以下の通りです。

1. IE6、IE7、IE8、IE9での見え方を比較
IE6とIE9での表示を比較

▲IE6とIE9での表示を比較

Internet Explorerは、同一の環境で複数のバージョンを共存させることはできません。例えばIE9をインストールすると、IE8以下の古いバージョンは上書きされて使えなくなります。

しかし、この「Expression Web SuperPreview」をインストールしておけば、IE9しか起動できない環境でも、IE6・IE7・IE8・IE9での表示確認ができます。


 
2. 半透明で重ねて比較表示

2つの表示結果を重ねて比較

▲2つの表示結果を重ねて比較

「Expression Web SuperPreview」の特徴的な機能として、2つの表示結果を半透明にして重ねる「オーバーレイ レイアウト」があります。

例えば、「IE6での表示」と「IE9での表示」を半透明にして重ねられます。これによって、どれくらい表示のずれがあるのかが一目瞭然です。


 
3. IE以外のブラウザでの表示確認

IE以外の他社製ブラウザ

▲IE以外の他社製ブラウザ

ウェブ上のサービスを利用することで、Internet Explorer以外のブラウザでの表示結果を見ることもできます。Windows上では動かせないMac版Safariの表示結果も見られます。

※(追記) このサービスは、2013年6月に終了しています。現在では使えません。


 
4. IEの表示なら、試用期限はない
試用期間は60日間

▲試用期間は60日間

この「Expression Web SuperPreview」は60日間の期限がある試用ソフトとして提供されています。しかし、この試用期限は「ウェブサービスの利用期限」であって、それを過ぎてもIEの表示確認はずっと可能です。


 
そのほか、HTMLソースと表示結果を同時に表示させ、特定の要素がどのように表示されているかを確認できるなど、便利な機能があります。今回は、このMicrosoft製ソフト「Expression Web SuperPreview」のインストール方法と、簡単な使い方を解説いたします。ぜひ、活用してみて下さい。

使用前の注意点 (2015年11月追記)

IE6~7での表示確認はどの環境でも可能ですが、IE8~9での表示確認は、そのバージョンのIEがインストールされていた環境でしかできません。最近に新規インストールしたWindows上などでは、IE7までの表示確認しかできない可能性があります。なお、この「Expression Web SuperPreview」を使う以外に、以下の2つの方法もあります。

他の手段1:仮想環境を使って、古いIEそのものを起動する
古いIEそのものを同時に起動する方法

古いIEそのものを同時に起動する方法 (図は、IE11とIE7を同時に起動したところ)

各バージョンのIEを使って本格的にウェブサイト丸ごとの表示確認をしたい場合は、仮想環境を使って古いIEそのものを起動する方が便利です。例えば右図は、IE11とIE7を同時に起動したところです。

その方法については別途、記事「仮想環境で IE6~10など古いバージョンのIEを使う方法」をご参照下さい。


 
他の手段2:「F12開発者ツール」のエミュレーションを利用する
F12開発者ツールで古いIEを再現

F12開発者ツールで古いIEを再現 (IE上でF12キーを押すと起動)

古いバージョンでの表示の雰囲気を確認できれば充分なら、IE11に搭載されている「F12開発者ツール」内のエミュレータを使う方法もあります。ブラウザの内蔵機能なため、外部ツールを何も準備する必要がありません。完全な再現はできませんが、簡易な確認だけで充分ならこの方法が最も手軽でしょう。


 
それでは次のページから、「Expression Web SuperPreview」のインストール方法と使い方を順にご紹介いたします。

【本記事の目次】
1. 「Expression Web SuperPreview」のインストール方法 (p.2)
2. 「Expression Web SuperPreview」の使い方 (p.3)
3. 他社製ブラウザの表示確認結果を得る方法 (p.4)

※本記事は、2011年5月24日に初版を公開し、2013年9月13日に内容の一部を改訂し、2015年11月に再改訂しました。記事中の画面イメージの多くは、2011年時点のものです。