【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

18 04-02 コンディショナルコメント

エ・ビスコム・テック・ラボ
  • >
  • >>

18/18

IEでは、特定のIEだけにスタイルシートを適用する方法として、コンディショナルコメントと呼ばれる機能が用意されている。HTML/XHTMLのコメントを利用したもので、コメント内に外部スタイルシートを読み込む<link />を記述する。コメントは<!-- ~ -->という形で記述することになっており、コンディショナルコメントを記述しても標準規格には違反しない。

たとえば、以下のソースでは文字の色を変える外部スタイルシートを3つ用意し、IE7にはred.css、IE6以下にはblue.css、IE以外のブラウザにはyellow.cssを適用するように指定している。なお、Macintosh版のIEはコンディショナルコメントに対応しておらず、「IE以外のブラウザ」として処理される。

用意したスタイルシート

  • red.css: 文字を赤色で表示/li>
  • blue.css: 文字を青色で表示/li>
  • yellow.css: 文字を黄色で表示

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-4-1 sample04-04-01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>SAMPLE</title>

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

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

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

</head>
<body>

<h1>見出し</h1>

</body>
</html>

コンディショナルコメントの記述形式

コンディショナルコメントの基本的な記述形式は以下のようになっている。

  • expressionの条件と一致するIEだけに適用する
<!--[if expression]> ~ <![endif]-->
  • expressionの条件と一致しないIEだけに適用する
<!--[if !expression]> ~ <![endif]-->

expressionの条件指定

expressionの部分には、次の形式でスタイルシートの適用条件を記述する。comparisonとversionは省略することが可能だ。

comparison feature version
  • feature: ブラウザの種類を指定
  • version: ブラウザのバージョンを指定
  • comparison: バージョンとの比較により適用対象の範囲を指定
featureで指定できる値
指定内容
IEInternet Explorerを指定。現在、featureで指定できる値はこれだけとなっている
versionで指定できる値
指定内容
7IE7を指定
6IE6を指定
5.5IE5.5を指定
5IE5.xを指定
comparisonで指定できる値
指定内容
ltversionより下のIEに適用する。versionで指定したIEには適用しない
lteversion以下のIEに適用する。versionで指定したIEも適用対象に含む
gtversionより上のIEに適用する。versionで指定したIEには適用しない
gteversion以上のIEに適用する。versionで指定したIEも適用対象に含む
  • >
  • >>

18/18

インデックス

目次
(1) 01 はじめに IE7日本語正式版のCSS実装を検証する
(2) 02-01 新規対応機能一覧
(3) 02-02 未対応機能一覧
(4) 02-03 新規対応/未対応機能の問題を回避する
(5) 03-01 修正済みバグ一覧
(6) 03-02 未修正バグ一覧
(7) 03-03 修正/未修正バグの問題を回避する(1)
(8) 03-04 修正/未修正バグの問題を回避する(2)
(9) 03-05 修正/未修正バグの問題を回避する(3)
(10) 03-06 修正/未修正バグの問題を回避する(4)
(11) 03-07 修正/未修正バグの問題を回避する(5)
(12) 03-08 修正/未修正バグの問題を回避する(6)
(13) 03-09 修正/未修正バグの問題を回避する(7)
(14) 03-10 修正/未修正バグの問題を回避する(8)
(15) 04-01 CSSハック一覧
(16) 04-02 CSSハックの利用(1)
(17) 04-03 CSSハックの利用(2)
(18) 04-02 コンディショナルコメント

もっと見る



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報