ホーム >  HTML・CSS >  条件付コメントでIEのバージョンごと分岐する

投稿日:   |  最終更新日:

条件付コメントでIEのバージョンごと分岐する

HTML・CSS

条件付コメントとは、コメントで囲われた部分の表示・非表示をバージョンによって分けることです。例えば、IE用のバージョンごとに読み込むCSSをかえるときに使用します。レスポンシブWEBデザインでよく使います。

※条件付コメントは、IEの独自仕様です。

条件付コメント書式 (例

・ブラウザが、IE7のときに「style.css」を読み込みます。
・始まりに<!--[if IE 7]>を記述します。
・終わりに<![endif]-->を記述します。

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="style.css">
<![endif]-->

条件付コメント書式 解説

指定のバージョン

<!--[if IE 6.0]>内容<![endif]-->

ブラウザが、IE6のとき実行します。

指定のバージョン以上

<!--[if gte IE 6.0]>内容<![endif]-->

ブラウザが、IE6の以上とき実行します。

指定のバージョン以下

<!--[if lte IE 6.0]>内容<![endif]-->

ブラウザが、IE6の以下とき実行します。

指定のバージョン未満

<!--[if lt IE 6.0]>内容<![endif]-->

ブラウザが、IE6の未満とき実行します。

バージョン分岐早見表

・○印は、対応可能なバージョンです。

指定のバージョン

条件付コメント IE6 IE7 IE8 IE9
<!--[if IE 6.0]>      
<!--[if IE 7.0]>      
<!--[if IE 8.0]>      
<!--[if IE 9.0]>      

指定のバージョン以上

条件付コメント IE6 IE7 IE8 IE9
<!--[if gte IE 6.0]>
<!--[if gte IE 7.0]>  
<!--[if gte IE 8.0]>    
<!--[if gte IE 9.0]>      

指定のバージョン以下

条件付コメント IE6 IE7 IE8 IE9
<!--[if lte IE 6.0]>      
<!--[if lte IE 7.0]>    
<!--[if lte IE 8.0]>  
<!--[if lte IE 9.0]>

指定のバージョン未満

条件付コメント IE6 IE7 IE8 IE9
<!--[if lt IE 7.0]>      
<!--[if lt IE 8.0]>    
<!--[if lt IE 9.0]>  

注意点

・このIE条件付コメントは推奨されていません。
多用は避けましょう。
・IE1~4,10~は条件付コメントの機能が実装されていません。
コメントと同様に扱われます。

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告