読者です 読者をやめる 読者になる 読者になる

BIT/O

WEBやデザイン、ゲームなど

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

ウェブサイト制作 Dreamweaver クロスブラウザ コーディング HTML JavaScript

f:id:bitorchard:20141129140459g:plain

Dreamweaverで条件付きコメントがリンク切れする時。

IEの各バージョンに対応するCSSやJSを読み込むため等の理由で「条件付きコメント」を使う場合があります。

条件付きコメントを使うと、条件対象ブラウザ以外ではファイル自体を読み込まないので、Webサイトの高速化にもつながります。

そんな便利な条件付きコメントですが、Adobe Dreamweaverの「テンプレート」で使おうとすると少し工夫が必要なようです。

 

通常の条件付きコメント(IE9未満に適用)

<!--[if lt IE 9]>
<script src="../common/js/html5shiv.min.js"></script>
<![endif]-->

しかしこの場合、<script>がコメント扱いとなってしまい、
テンプレートを適用したページではリンク切れとなってしまう可能性があります。

解消するには?

そこで、Dreamweaverのテンプレートのパラメータ機能「@@()@@」を使ってそれを解消します。下記のようにコメントタグを切り分けることで、テンプレート上でのコメント機能を無効化、<script>をHTMLタグとして認識させることが出来ます。

調整した条件付きコメント(IE9未満に適用)

@@('<')@@@@('!--[if lt IE 9]>')@@
<script src="../common/js/html5shiv.min.js"></script>
@@('<![endif]--')@@@@('>')@@

このように記述すると「ソースフォーマットの適用」を行っても崩れません。

是非一度お試しください。