IEの条件付きコメントをDreamweaverのテンプレートで使う方法！

　IE6,7,8などは、FirefoxやSafariなど他のブラウザとスタイルシートの違いが多くて、個別にスタイルシートのファイルを設定したい場面が多くあります。そんな時よく条件付きコメント「<!–[if lt IE 9]>○○○○<![endif]–>」を使うのですが、そのままではDreamweaverのテンプレートでは使えません。

例えば、IE6-8に専用のスタイルシートを設定したい場合、<header>〜</header>にこのように条件付きコメントを書きまよね。

<!--&#91;if lt IE 9&#93;> 

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<!&#91;endif&#93;-->

普通にhtmlファイルに書くならこれで良いですが、このままDreamweaverのテンプレートに書くと、コメントアウト扱いになって無視されてしまいます。テンプレートが反映されるhtmlファイルの階層によって変更されるはずの、cssファイルへのリンクが自動で変更されません。

そこで、このようなDreamweaverのテンプレートに使う変数の書き方を利用します。

@@(変数名)@@　→　変数を使いたいとき

@@('出力したいテキスト')@@　→　テキストを出力するとき

これは条件でテンプレートの表示が変更ができる便利なものですが、これで先ほどの条件付きコメントを書き直します。

@@('<')@@!--&#91;if lt IE 9&#93;> 

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<!&#91;endif&#93;--@@('>')@@

このように、それぞれ「<>」を「@@(”)@@」で表示させることによって、テンプレートファイル上ではコメントではなくなりますので、cssファイルが正常に読み込まれるようになります。

そして、テンプレートが反映されるhtmlファイル上では、コメントとして出力されるようになりますので、「条件付きコメント」として機能するようになります。

顔文字みたいで笑えますが、Dreamweaverを使うときにはかなり便利なので、覚えておいて損はないですよ。