【HTML / metaタグ】X-UA-Compatible(IE=edge)の使い方・書き方まとめ

HTMLにおけるmetaタグの1つ、X-UA-Compatible(IE=edge)の使い方や書き方のまとめです。最も重要なことを簡潔にまとめてあります。

Point

①Webページが古い表示方法にされるのを防ぐ

②IEブラウザのユーザに配慮

X-UA-Compatibleとは

X-UA-Compatibleとはレンダリングモードを指定するmetaタグです。レンダリングモードとは、画面の表示方法を決めるときに使うもので、主にIEブラウザに対して設定します。 IEにはいくつかのレンダリングモードがあるので、X-UA-Compatibleを使えばそれを指定することができます。

少しわかりにくいので例をだして説明します。

現在の新しいブラウザで昔に作られた古いWebページにアクセスすると、表示がおかしくなることがあります。それを回避するために、IEにはデフォルトでレンダリングモードという機能が備わっています。レンダリングモードを互換モードに設定すると、古いページでも表示が崩れずに表示させることができます。

しかし、これは古いWebページ(IE7以前)に対する配慮なので、 IE8以降に作られた新しいWebページにはかえって邪魔になる機能です。

なぜなら、互換しなくても新しいブラウザで表示できるのに、わざわざ古い表示方法に互換するわけですから、意味がありません。

X-UA-Compatibleは、IE8以降に作られた新しいWebページに対して設定します。後ほど書き方をご紹介しますが、レンダリングモードを「IE=edge」と指定して使います。

IE8以降を使用しているユーザは、任意でレンダリングモードを互換モードにすることができますが、 X-UA-CompatibleにIE=edgeを設定することで、ユーザが互換モードにするのを防ぎます。これにより、常にWebページを最新のブラウザで標準モードで表示させることができるようになります。

IE8以降作成された新しいWebページなのに、ユーザが誤って古い表示方法に互換してしまうのを、こちら(ページ作成者側)で防いであげるイメージですね。

X-UA-CompatibleにIE=edgeを指定する書き方は、以下のようにHTMLでheadタグ内に書きます。


<meta http-equiv="X-UA-Compatible" content="IE=edge">

このままコピペで使用できます。なお、マイクロソフトによると、この記述はcssやJavaScriptファイルの読み込みより前に記述することが望ましいとのことです。