IE9／IE10でWebページの表示が乱れるときの対策（互換表示機能を使う）：Tech TIPS

Internet Explorer（IE） 6／7のころに制作されたWebページをIE9／IE10で開くと、表示が乱れることがよくある。しかしIE9／IE10に標準装備の「互換表示」という機能を活用すれば、古いIE向けのWebページでも正常に表示できる可能性がある。

[島田広道，デジタルアドバンテージ]

連載目次

対象ソフトウェア：Internet Explorer 9 ／ Internet Explorer 10

解説をスキップして操作手順を今すぐ読む→

解説

　インターネットあるいはイントラネット上のWebページを閲覧して回っていると、表示の乱れるページに遭遇することがある。

IE8（左）では正常だがIE10（右）ではまったく表示されないWebページの例
どちらもイントラネット・サイト上の同じURLを指定しているが、表示結果は大きく異なっている。IE10の方は装飾やレイアウトがまったく反映されておらず、テキストだけがそのまま表示されている。

　正しく表示されない原因はたくさんあるが、特にInternet Explorer（IE） 6／7全盛のころに制作されたWebページは、その設計が古いせいで、IE9／IE10のような最近のWebブラウザだと正しく表示されないことがよくある。

　そこで役立つのが「互換表示」と呼ばれる機能だ。これはIE8以降のバージョンのIEに標準装備されていて、古いIEと同等の表示結果が得られるように動作（表示方法）を切り替えることができる。IE9／IE10では、ワンタッチでIE7と互換性のある表示モードに切り替えられる。本稿ではWebページを正しく表示するために、この互換表示機能を適切に設定する方法を説明する。

操作方法

　互換表示機能を使ってWebページを正しく表示する場合、互換表示モードを切り替えるためのボタン（以下「互換表示ボタン」と略）がアドレス・バーに表示されるかどうかによって対処方法が異なる。

●互換表示ボタンがアドレス・バーに表示されている場合の対処方法

　まずは対象のWebページを開いてから、アドレス・バーの右端に紙を破いたようなマークのボタンがないか確認してみよう。それが互換表示ボタンだ。灰色なら互換表示モードはオフ（つまりネイティブなモード）、青色ならオンである。ボタンをクリックするたびにオン／オフが切り替わるので、クリックしてみてWebページが正しく表示されるようになるかどうか確認しよう。

■互換表示ボタン（オフ）

■互換表示ボタン（オン）

互換表示モードの切り替えボタン
アドレス・バー右端にこのボタンが表示されていれば、クリックすることで互換表示モードのオン／オフを切り替えられる。クリックしてWebページの表示が正常になるか確認しよう。ただし、後述するようにこのボタンが表示されないこともある。
　 （1）互換表示モードがオフの状態（つまりネイティブなモードで表示されている状態）。
　 （2）互換表示モードがオンの状態

　いったん互換表示モードをオンにすると、以後、そのページを含むドメイン全体が互換表示モードで表示されるようになる。例えば、http://www.example.jp/sample.phpというページで互換表示モードをオンにした場合、次のようなURLのページも互換表示モードで表示される。

• http://www.example.jp/sub/
• http://sub.example.jp/
• https://example.jp/

互換表示によって正しく表示されるようになったWebページ
IE10で互換表示モードがオフ（左）だとテキストしか表示されなかったが、同じIE10でも互換表示モードをオン（右）にしたら正しく表示されるようになった。

●互換表示ボタンが表示されない場合の対処方法

　互換表示モードを切り替えようにも、ページによって互換表示ボタンがアドレス・バーに表示されないことがある。その原因は大別すると次の2つに分類される（どちらも互換表示ボタンでの設定より優先される）：

1. Webサイト側で、互換表示モードのオン／オフが強制的に設定されている
2. IE側で、ドメインとは別の区分けで、該当ページを互換表示モードにするかどうかが決定されている

　1の場合、IE側で恒久的にオン／オフの設定を変えることはできない（一時的に変更する方法は後で説明する）。

　2は、全サイトあるいはIEのゾーンといった、ドメインより広い範囲で互換表示モードを一律にオンにする機能である。IEの設定を変えることで無効化できるので、その上で互換表示ボタンを操作してモードを切り替えればよい。以下では、2に該当するかどうか確認し、設定を変更する手順を説明する。

　まず［Alt］キーを押して、普段は隠れているメニュー・バーを表示させてから［ツール］−［互換表示機能］を実行する。

IEの互換表示設定ダイアログを開く
互換表示ボタンが表示されない場合は、IEのメニューから互換表示モードを設定してみよう。
　 （1）互換表示モードを切り替えようにも、互換表示ボタンが表示されない。
　 （2）IE9／IE10ではデフォルトでこのメニュー・バーが表示されない。しかし［Alt］キーを押すと一時的にメニュー・バーが現れる。
　 （3）これをクリックしてメニューを開く。
　 （4）これが褐色で表示されていてクリックできない場合、互換表示ボタンは表示されない。
　 （5）これをクリックすると「互換表示設定」ダイアログが現れる。

　「互換表示設定」ダイアログが表示されるので、下の方にあるチェックボックスに注目する。特に［イントラネット サイトを互換表示で表示する］にチェックが入っている場合、IEの「ローカル・イントラネット・ゾーン」に分類されている全サイトで互換表示モードがオンになっているはずだ。その場合、もし対象のWebページがローカル・イントラネット・ゾーンに分類されているなら、それを別のゾーンに移動するか、［イントラネット サイトを互換表示で表示する］のチェックを外してオフにしてみよう。ただし後者の方法だと、ローカル・イントラネット・ゾーンに分類されているほかのサイトも互換表示モードがオフになるので、表示が乱れるようなら個別に互換表示ボタンをクリックしてオンに戻す必要がある。

　現在表示されているWebページが、どのゾーンに分類されているか確認するには、IEのブラウザ・ペイン上で何も表示されていないところを右クリックしてプロパティを開き、［ゾーン］という項目を確認する（詳細はTIPS「IE9でゾーン情報を確認する」を参照）。またゾーンの移動についてはTIPS「アドレス表記を変更してIEのゾーンを切り替える」が参考になる。

互換表示設定ダイアログの設定を変更する
互換表示ボタンが表示されない場合は、IEのメニューから互換表示モードを設定してみよう。
　 （1）これにチェックが入っている場合、すべてのWebページが互換表示モードで表示される。デフォルトではオフになっている。IE9以降のWebブラウザに最適化されたWebページが正しく表示されなくなるので、特段の理由がなければ通常はオフにした方がよい。
　 （2）これにチェックが入っている場合、IEの「ローカル・イントラネット・ゾーン」に分類されている全サイトが互換表示モードで表示される。デフォルトではオンになっている。試しにチェックを外してオフにしてみて、対象のWebページが正常に表示されるかどうか確認してみよう。ただし、オフにするとローカル・イントラネット・ゾーンに分類されているほかのサイトも互換表示モードがオフになり、逆に表示が乱れることもある。その場合は、サイトごとに互換表示ボタンをクリックして互換表示モードをオフにする。あるいはこのチェックボックスはオンにしたまま、TIPS「アドレス表記を変更してIEのゾーンを切り替える」を参考に、対象のWebページをほかのゾーンへ移動してもよい。
　 （3）Microsoftは互換表示モードで正しく表示されるドメインを調査しており、そのリストを更新しながらIE向けに配布している。これにチェックが入っている場合、そのリストに含まれるサイトは互換表示モードで表示される。これも他のサイトの表示に注意しつつ、チェックを外してオフにして対象のWebページが正常に表示されるか確認してみよう。
　 （4）互換表示モードで表示されるドメインを追加／削除できる。ただし、（1）〜（2）のいずれかチェックが入っていると、該当するサイト（ドメイン）はここの設定に関係なく互換表示モードで表示される。またWebサイト側で互換表示モードのオン／オフが強制的に設定されている場合も同様に、ここの設定より優先される。

　なお、上記の（1）〜（2）の設定を変えたりゾーンを変更したりした場合は、IEを再起動してから［Ctrl］＋［F5］を何回かクリックして対象のWebページを確実に再表示（再描画）させた方がよい。

　また、ドメインに所属しているPCの場合、グループ・ポリシーで（1）〜（2）やゾーンが設定していて、IEのUIからは設定を変更できないことがある。その場合はグループ・ポリシーの管理者と相談していただきたい。

●F12開発者ツールで強制的に表示モードを切り替える

　以上の方法で表示がまったく変わらない場合は、Webサイト側で互換表示モードのオン／オフが強制的に設定されていることが考えられる。その場合、一時的ではあるが、IE側で強制的に表示モードを変更して正常に表示できないか確認する方法がある。それにはIE9／IE10に標準装備されている「F12開発者ツール」を利用する（このツールの詳細はTIPS「Webページのトラブル原因究明にIE8の『開発者ツール』を活用する」が参考になる）。

　まず対象のWebページを開いてから［F12］キーを押してF12開発者ツールを起動する。デフォルトではブラウザ・ペインの下側に現れるはずだ。

F12開発者ツールを起動する
対象のWebページを開いてアクティブにしておく。
　 （1）F12開発者ツールの画面。［F12］キーを押すと起動できる。

　F12開発者ツールのメニュー・バーにある［ブラウザー モード］［ドキュメント モード］の設定を変更しながら、正しく表示できないか確認していく。前者ではWebブラウザ全体の挙動を、後者はHTML／CSSの描画（レンダリング）の挙動をどのバージョンのIEに合わせるか設定できる。

■ブラウザ・モードの選択肢

■ドキュメント・モードの選択肢

F12開発者ツールで変更できる表示モード
これはIE10のF12開発者ツールで選択できる2種類の表示モード。「ブラウザ・モード」では、選択したバージョンのIEに合わせてWebブラウザ全体の挙動が変更される。一方「ドキュメント・モード」では描画（レンダリング）の挙動が変更される。どちらのモード設定も保存されないため、IEを再起動するとデフォルトのモード設定に戻ってしまう。しかし、どのモードなら正しく表示されるのか確認できるので、Webサイトの管理者や制作者に改善を要望することはできるだろう。

　互換表示ボタンが表示されず、前述の互換表示設定ダイアログで設定を変えても表示が変わらない場合は、まずドキュメント・モードの選択を変えてみよう。メニューの中で「（ページの既定）」が付いているのがデフォルトのモード（IEのバージョン）なので、それと大きく異なるモードを選んでみる。例えばデフォルトが「Internet Explorer 7 標準」だったら、「標準」（つまりネイティブ表示）か「Internet Explorer 9 標準」を選んでみる。

表示モードの変更で正しく表示されるようになったWebページの例
互換表示ボタンが表示されない場合は、IEのメニューから互換表示モードを設定してみよう。
　 （1）これがデフォルトのドキュメント・モード。IE7と同等のレンダリングをするようにWebサイト側から設定されている。
　 （2）IE10ネイティブのモードを選んでみた。
　 （3）変更前は不規則な縦並びだった各画像が、（2）によって横並びで整列された。画像の角も丸くなっているのが分かる。

　前述のようにF12開発者ツールでのモード変更は保存されず、IEを再起動すると元に戻ってしまう。正しく表示されるモードが確認できたら、対象のWebページの管理者あるいは制作者に改善を要望してみるとよいだろう。

■この記事と関連性の高い別の記事

• アドレス表記を変更してIEのゾーンを切り替える（TIPS）
• IE9でゾーン情報を確認する（TIPS）
• IEのセキュリティ設定を変更してセキュリティ機能を強化する（1）（TIPS）
• Internet Explorerの保護モードとは？（TIPS）
• IISのサイト設定でIE8の互換表示モードを強制する（TIPS）

「Tech TIPS」