ウェブサイト制作時のIE対応まとめ（条件付コメント・CSSハック）

コーディング2015.12.25

最終更新日：2019.7.12 Update!!

前回に引き続き、古いバージョンのInternet Explorerでもウェブサイトをキレイに表示させるためのテクニックをまとめていきます。今回は前回紹介した外部プラグインの利用とは別にHTMLやCSSのソースを変更して対応させる方法です。

条件付コメントを利用する

条件付きコメントとは、Internet Explorerで特定のバージョンに対して適用させるHTMLコメント記述方法のことです。Internet Explorerではバージョンごとにブラウザの挙動が異なるため、IE対策の一つとしてこのような手法を使うことがあります。また、この条件付きコメントが使用できるのはIE9までとなっているようです。条件付きコメントは下記の種類があります。

<!--[if IE]>
　// すべてのバージョンのIEに適用される
<![endif]-->

<!--[if IE 7]>
// IE7のみに適用される
<![endif]-->

<!--[if !IE 7]>
 // IE7以外に適用される
<![endif]-->

<!--[if gte IE 7]>
 // IE7以上に適用される
<![endif]-->

<!--[if gt IE 7]>
 // IE7を超える（IE8、IE9）ものに適用される
<![endif]-->

<!--[if lte IE 7]>
 // IE7以下のものに適用される
<![endif]-->

<!--[if lt IE 7]>
 // IE7未満（IE5、IE6）のものに適用される
<![endif]-->

記述方法は次のようにコメントタグの間に適用させたい内容を挿入します。

<!--[if gte IE 8]>

 IE8とIE9のブラウザで閲覧した時に表示されます

<![endif]-->

IE対応時におけるmetaタグ設定

Internet Explorerでは、バージョンごとにレンダリングが異なるため互換表示モードと呼ばれる通常とは異なるウェブページの表示方法があります。この互換表示モードはサイトとブラウザの間でウェブページの表示を調整するための方法（レンダリング）なのですが、これが原因で表示が崩れてしまうケースもあるようです。それを防ぐために下記のmetaタグをheadタグ内に記述します。

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

IE=edgeというのは最新のバージョンを指しており、このmetaタグを入れることにより、常に最新バージョンでの表示方法を指定できます。ちなみにこの値を変更することで特定のレンダリングモードを指定することもできます。

//IE8の表示モードを指定
<meta http-equiv="X-UA-Compatible" content="IE=8">

//DOCTYPE宣言がある場合はIE8の表示モード、無い場合は互換表示モードに
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

DOCTYPEタイプの定義

互換表示を防ぐためにはDOCTYPE宣言が必要となります。これが無い場合はバージョンによっては互換表示モードで表示されるケースもあります。DOCTYPE宣言はHTMLファイルの最初に下記のように記述します。

//IE6以下ではxml宣言が文頭にあると互換モードになるため注意が必要です

//XHTML1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />


//XHTML1.0　Frameset
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" />


//XHTML1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />


//HTML5
<!DOCTYPE html>

CSSハックのテクニック

CSSハックとは、ブラウザ間やバージョンごとに異なる挙動から表示を統一させるための特殊なCSSの記述のことです。主にInternet Explorerのバージョンに合わせた対応策として利用されます。たくさん種類がありますが下記の代表的なものを挙げています。

//スターハック（macIE5、IE5、IE6）
* html .ie_hack {
　margin: auto;
}

//アンダースコアハック（IE5、IE6）
.ie_hack {
　_margin: auto;
}

//アスタリスクハック（IE6、IE7）
.ie_hack {
　*margin: auto;
}

//IE7スターハック（IE7）
*:first-child+html .ie_hack {
　margin: auto\9;
}

//バックスラッシュ9ハック（IE8）
.ie_hack {
　margin: auto\9;
}

//ノットターゲットハック（IE9）
.ie_hack:not(:target) {
　margin: auto;
}

//アットメディアゼロハック（IE9、IE10）
@media screen and (min-width:0\0) {
 .ie_hack {
   margin: auto; 
 }
}

//アットメディアエムエスハイコントラストハック（IE10）
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
 .ie_hack {
   margin: auto;
 }
}

前回から引き続き2回にわたり、Internet Explorerでのブラウザ表示対応策についてまとめてみました。古いブラウザのシェアがどんどん下がってきている中で全て必要ではありませんが、ケースに合わせた対応を行うことが大切ですね。