ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ:ツール紹介やプログラム集・Internet Explorerの特異な振る舞いのfixに役立つ条件付きコメント


●条件付きコメント[if IE]とは

数多く存在するwebブラウザの内、もっとも利用者が多く、かつもっとも特異な振る舞いでwebデザイナーを悩ましてくれるのが、Internet Explorerです。

その振る舞いをfixする方法の一つに、条件付きコメント[if IE]があります。
条件付きコメントは、Windows版 IEの独自仕様で、条件(IEのバージョン)により、適応させるスタイルを振り分けることができます。IE以外のブラウザには、単なるコメントアウト文として扱われ、影響を与えません。

IEの各バージョン用に考慮したスタイルシートを用意して、以下の例のように<head>〜</head>に記述して、読み込ませることができます。もちろん<body>〜</body>に直接要素を記述することも可能です(下◆2のテストがこれに該当します)。

・IE全てに
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> 

・ IE7のみに
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

・ IE6のみに
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

この条件付きコメント[if IE]が本当に機能しているのか、チェックしてみました。


◆1条件付きコメント[if IE ]を使い、ブラウザがInternet Explorerかどうか判定するテスト
ちなみに、Mac版IE5.2.3の場合、IEと認識されません。

お使いのブラウザはInternet Explorerです。

お使いのブラウザはInternet Explorerではありません。


◆2条件付きコメント[if IE ]を使い、IEのバージョンにより、表示を変えるテスト

Internet Explorer以外


ピンク色部分のソース(条件式)

<![if !IE ]>
<p>Internet Explorer以外</p>
<![endif]>

<!--[if IE ]>
<p>Internet Explorer</p>
<![endif]-->

<!--[if IE 5 ]>
<p>バージョン:5</p>
<![endif]-->

<!--[if IE 6 ]>
<p>バージョン:6</p>
<![endif]-->

<!--[if IE 7 ]>
<p>バージョン:7</p>
<![endif]-->

<!--[if IE 8 ]>
<p>バージョン:8</p>
<![endif]-->

<!--[if lt IE 7 ]>
<p>7未満です。</p>
<![endif]-->

<!--[if gte IE 7 ]>
<p>7以上です。</p>
<![endif]-->


条件式の説明
・[if !IE ] IE以外に適用   [if !IE 6 ] IE6以外に適用
・[if IE ] すべてのIEに適用   [if IE 6 ] IE6だけに適用
・[if lt IE 7 ] IE7未満に適用  lt:Less Than
・[if lte IE 7 ] IE7以下に適用 lte:Less Than or Equal
・[if gt IE 7 ] IE7より上に適用 gt:Greater Than
・[if gte IE 7 ] IE7以上に適用 gte:Greater Than or Equal


※Internet Explorerおよび Windows は、米国 Microsoft Corporation の、米国、日本およびその他の国における登録商標または商標です。



戻るボタン
Copyright© 2017 Conifer,Inc. All rights reserved.