IEでWebページを正しく表示するには？ X-UA-Compatible メタタグの解説

2024-04-02

HTMLのmetaタグとInternet Explorer

IEの互換性モード

IEは、古いバージョンのIEと互換性を保つために、"互換性モード"と呼ばれる機能を備えています。互換性モードでは、IEは最新のWeb標準ではなく、古いバージョンのIEの仕様に基づいてWebページを表示します。

X-UA-Compatibleメタタグ

<meta http-equiv="X-UA-Compatible" content="IE=edge"> というメタタグをHTMLページに追加することで、IEに以下の指示を与えることができます。

"IE=edge" の意味: IEの最新バージョンで利用可能なレンダリングエンジンを使用して、Webページを表示するように指示します。
効果: このメタタグを指定することで、IEは常に最新の互換性モードでWebページを表示します。

メタタグの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>IEの互換性モードを制御する</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
  <h1>このページはIEの最新バージョンで表示されます</h1>
</body>
</html>

メタタグを使用するメリット

X-UA-Compatible メタタグを使用する主なメリットは以下の2つです。

Webページの表示を改善する: 古いバージョンのIEでWebページを表示する場合、レイアウトが崩れたり、機能が正しく動作しないことがあります。メタタグを使用することで、これらの問題を解決することができます。
開発者の負担を軽減する: 異なるバージョンのIEに対応するために、複数のWebページを用意する必要がなくなります。

メタタグを使用するデメリット

IE以外のブラウザに影響を与える可能性: 一部の古いブラウザは、このメタタグを正しく解釈できない場合があります。

結論

X-UA-Compatible メタタグは、IEでWebページを正しく表示するために役立つツールです。ただし、IE以外のブラウザへの影響も考慮する必要があります。

補足

X-UA-Compatible メタタグは、IE11 以前のバージョンのIEでのみ有効です。
Microsoft Edgeは、IEとは別のブラウザであり、X-UA-Compatible メタタグを異なる方法で処理します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>IEの互換性モードを制御する</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
  <h1>このページはIEの最新バージョンで表示されます</h1>
</body>
</html>

このコードを保存して index.html という名前で保存し、ブラウザで開くと、IEのバージョンに関わらず、常に最新のレンダリングエンジンを使用してページが表示されます。

X-UA-Compatible メタタグは、HTMLの <head> 要素内に配置する必要があります。
content 属性の値は、"IE=edge" 以外にも、"IE=10" や "IE=9" などのように、特定のバージョンのIEを指定することができます。

注意事項

X-UA-Compatible メタタグは、IE以外のブラウザに影響を与える可能性があります。
古いバージョンのIEでWebページを正しく表示するために、メタタグ以外にも対策が必要になる場合があります。

IEの互換性モードを制御する他の方法

HTTPヘッダー

X-UA-Compatible メタタグと同様に、HTTPヘッダーを使用して、IEに互換性モードを指示することができます。

X-UA-Compatible: IE=edge

このヘッダーは、Webサーバーの設定で設定することができます。

Enterprise Mode Site Listは、IEで特定のWebサイトを互換性モードで表示するように設定するための機能です。

この機能を使用するには、以下の手順が必要です。

グループポリシーエディタを開きます。
ユーザーの構成 > 管理用テンプレート > Windows コンポーネント > Internet Explorer > Internet Explorer 11 > 互換性設定 に移動します。
Enterprise Mode Site List をダブルクリックします。
有効 を選択します。
追加 をクリックして、互換性モードで表示したいWebサイトのURLを追加します。
OK をクリックします。