« JavaScriptをFireBugでデバッグ | トップページ | JavaScriptで記事の検索 »

2006年6月17日 (土)

【HTML】Conditional Comments

今日、たまたま職場で話が出たので、Conditional Commentsについて書こうと思います。
例えば、画面にアルファチャンネル付PNGを表示したい場合、IE6以下ではそのまま表示することは 出来ませんのでCSSでIE独自のフィルタを使うことになります。(IE5はそれでもダメだったかな...?)
でも、Firefoxとかは標準でサポートしているので、そんな必要はありません。
つまり、IEの指定バージョンにのみCSSファイルを読ませればよいわけですが、そんな時にこの Conditional Commentsが役に立ちます。
CとかC#とかがわかる方は、プリプロセッサを思い浮かべていただければ早いと思います。
具体的には以下のように書きます。
<link rel="stylesheet" type="text/css" href="style.css">

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

上のlinkタグは普通にすべてのブラウザに認識されますので、共通のスタイルを定義しておきます。
下のlinkタグは、コメント内にありますのでIE以外には認識されませんが、IEはこれを認識して 条件に合っていれば中に書いてあるHTMLが有効になります。
IE独自のCSSファイルを作成して、style.cssで定義しているクラス名と同じクラス名を定義してIE特有のスタイルを記述することで スタイルは上書きされ、IEにのみIE独自のスタイルを設定できるという感じです。
書式は以下のようになっています。
<!--[if expression]> ..... <![endif]-->
以下に簡単な例を示します。
まず、普通にアルファチャンネル付のPNGを表示してみましょう。

上の画像は、2枚のPNGが重なっています。
上の画像は半透明なのですが、IE6でご覧の方には青い背景の上に赤い四角が表示されていると思います。
FirefoxやOperaでご覧の方には、ちゃんと下の画像が透けて見えていると思います。
以下のようなHTMLを記述しています。
<div style="width:443px;height:262px;background-image:url(back.png);padding:0px;
  border:solid 1px black;">
  <div style="width:443px;height:262px;background-image:url(layer.png);
    background-repeat:no-repeat;padding:0px;margin:0px;"></div>
</div>

今度は、IE6のみ正しく表示されるようにConditional Commentsを使って記述してみましょう。

今度は、IE6の方は、ちゃんと赤い四角の下に画像が透けて見えていると思いますが、それ以外の方は赤い四角の画像が表示されていないと思います。
こちらは以下のようなHTMLです。
<div style="width:443px;height:262px;background-image:url(back.png);padding:0px;
  border:solid 1px black;">

  <!--[if IE 6]>
  <div style="width:443px;height:262px;
    filter: progid:DXImageTransform.Microsoft.
    AlphaImageLoader(src='layer.png',sizingMethod=scale);
    background-repeat:no-repeat;padding:0px;margin:0px;"></div>
  <![endif]-->

</div>
表示の関係上、途中で折り返してますのでちょっと見辛いですが、よくよく見てみると、中のdivタグの
background-image:url(layer.png);
が、
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='layer.png',sizingMethod=scale);
に変わっているだけですね。
つまり、IEにはIE独自のCSSであるfiler: ....の部分を設定すればよいことになります。
したがって、style.cssには、
div.alpha_image
{
    width:443px;
    height:262px;
    background-image:url(layer.png);
    background-repeat:no-repeat;
    padding:0px;
    margin:0px;
}
と記述しておき、style-ie6.cssには
div.alpha_image
{
    background-image:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
      (src='layer.png',sizingMethod=scale);
}
のように記述し、以下のように<head>~</head>内に記述すれば、
<link rel="stylesheet" type="text/css" href="style.css">

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

IEでは後の設定が上書きされ設定されるため、IEでもFirefoxでもアルファチャンネル付PNGを綺麗に表示できるようになります。 外部スタイルシートをインクルードする順序が重要です。今回のような場合は、IE独自のものは後でインクルードしてください。
このように、JavaScriptなどを使ってブラウザを判定しなくてもHTMLレベルで設定することも可能な場合もありますので、知っていて損はないと思います。

参考資料
About Conditional Comments(MSDN)

|

« JavaScriptをFireBugでデバッグ | トップページ | JavaScriptで記事の検索 »

コメント

はじめまして^^

アルファチャンネルについて調べてたらこちらに辿りつきました。

記事を読ませていただきました。
すっごく参考になりました♪

そこで、1つ質問させてください。

CSSで、以下のようなかんじでアルファチャンネル付きPNGを敷き詰めるようなケースの場合、フィルタを適用させることは可能でしょうか。

---
body {/*背景イメージ*/
background: url(bg-image.jpg) no-repeat right bottom;
}

div.blog-body {/*αチャンネルPNG*/
background: url(alpha.png) repeat-y top left;
}
---

投稿: bzbell | 2006年9月16日 (土) 20時16分

bzbellさん、はじめまして。
コメントありがとうございます。

ご質問いただいた件ですが、IE6では透過PNGはfilterで指定しないと透過されないみたいです。
したがって、backgroundで透過PNGを指定しても透過されませんよね。

それでは、filterで繰り返し表示できるかというと、それも出来なさそうです。
ということで、私の知る限りではできなさそうですね。
せっかく質問いただいたのに、良い案がなくて申し訳ないです。

filterで表示した画像は、文字などが画像の上に重なることから、背景のような振る舞いですけどね。


ちなみに、filterで表示した透過PNGの上にaタグのリンクが重なった場合、リンクが有効にならないという問題もあります。
いつでも、どこでも使えるというものではないですね。

IE7では透過PNGもしっかり透過表示されますので、気軽に使えるのはもう少し先かもしれませんね。


それでは、今後とも宜しくお願いします。

投稿: やまねこ | 2006年9月18日 (月) 00時06分

こんにちわ^^

返答ありがとうございます。
やっぱりそうですか…。

なんとなく使い方からして、できなさそう…とは思っていたのですが、やまねこさんのような有識者の人ならご存知かと思ってコメントさせてもらいました。

お手数おかけしてすいません。
ありがとうございます♪

納得しました( ̄∇ ̄)/

投稿: bzbell | 2006年9月24日 (日) 13時03分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10557831

この記事へのトラックバック一覧です: 【HTML】Conditional Comments:

« JavaScriptをFireBugでデバッグ | トップページ | JavaScriptで記事の検索 »