コンディショナルコメント(各IEのバージョンにCSSを適用)

WEBサイト制作上、避けたいけれど避けられない障害物 『IE』…。
CSSハックしたり、JavaScriptを読み込んだりして色々とサイトの裏側で施術を行うわけですがその施術の内の一つとしてコンディショナルコメントというものがあります。

コンディショナルコメントって何?

コンディショナルコメントとは、
特定のIEだけにスタイルシートを適用するためのコメントアウトです。

HTML
<!--[if IE ●]>
・・・
<![endif]-->

この記述は標準規格には違反しないので、気にせずHTML内に書きこめます。

コンディショナルコメントの使い方

コンディショナルコメントの基本的な使い方は以下の通り。

HTML
expressionの条件と一致するIEだけに適用する
<!--[if expression]>
・・・
<![endif]-->

expressionの条件と一致しないIEだけに適用する
<!--[if !expression]>
・・・
<![endif]-->
※ビックリマークがつきます。

このexpressionの部分には、次の形式でスタイルシートの適用条件を記述します。

  • feature: ブラウザの種類を指定
  • version: ブラウザのバージョンを指定
  • comparison: バージョンとの比較により適用対象の範囲を指定
HTML
<!--[if expression]>
↓↓↓↓
書き方の順番は
<!--[if comparison feature version ]>

comparison → feature → version となります。

ちなみにcomparisonversionは省略することも出来ます。

featureで指定できる値
IE Internet Explorerを指定。現在、featureで指定できる値はこれだけ
versionで指定できる値
9 IE9を指定
8 IE8を指定
7 IE7を指定
6 IE6を指定
5.5 IE5.5を指定
5 IE5を指定
comparisonで指定できる値
lt versionより下のIEに適用する。versionで指定したIEには適用しない
lte version以下のIEに適用する。versionで指定したIEも適用対象に含む
gt versionより上のIEに適用する。versionで指定したIEには適用しない
gte version以上のIEに適用する。versionで指定したIEも適用対象に含む

コンディショナルコメント サンプルソース

※IE全ての場合
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->
※IE7のみの場合
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->
※IE6以下の場合
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->
※IE以外の場合
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not_ie.css" />
<![endif]-->

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です