「条件付きコメント」を使ってIEの問題を解決するには

「条件付きコメント」を活用して、IEのみに発生するスタイルシート解釈上の問題を解決するには、 スタイルシートを2ファイルに分割します。

  • all.css : すべてのブラウザに適用するスタイル
  • ie.css  : IE用に上書きするスタイル

このようにスタイルシートを2つに分割し、ie.cssをIEにのみ読ませるようにすれば、 スタイルシートのソースを分かりにくくすることなく、IEの問題を解決できます。

スタイルシートは、後の記述が採用される

スタイルシートでは、同一の装飾内容については、最後に記述された指定が採用される規則になっています。

例えば、all.cssの中に以下のようなスタイルの指定がある場合を考えます。

h1 { color: red; }

これは、h1要素(見出し)の文字色を赤色にする指定です。
ここで、ie.cssに以下のような記述があるとします。

h1 { color: blue; }

これは、h1要素の文字色を青色にする指定です。
all.cssを先に読み込み、後からie.cssを読み込んだ場合は、後の記述が採用されるため、h1要素の文字色は青色になります。

すべてのブラウザに all.css を読ませ、その後、IEだけに ie.css を読ませれば、 「IE以外のブラウザでは見出しは赤色、IEでは見出しは青色」という装飾が実現できます。

この方法を使って、「IEのみで問題の発生する記述」を、「IEでうまく表示されるような記述」で上書きすることで、 IEとIE以外のどちらのブラウザでもうまく表示できるようにすれば良いのです。

「条件付きコメント」でIE用のスタイルを読ませる方法

条件付きコメントを使ってIEにのみ対策用スタイルを適用させるには、次のように記述します。

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

上記のソースを、HTMLのhead要素内(<head>~</head>の中)に記述すれば、 all.cssはすべてのブラウザで読まれ、ie.cssはIEのみで読まれるようになります。 (※IEは all.css と ie.css の両方を読むことになります。)

もし、問題が「IE6以下」でのみ発生するのであれば、「IE6以下のみに適用させるスタイルシート」(例えば、ie6.css)を用意しておき、以下のように記述します。

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

上記のソースだと、ie6.css は、IE6以下にしか適用されません。
※IE6以下に適用されるとはいえ、IE4以下には適用されません。なぜなら、条件付きコメントはIE4以下ではサポートされていないからです。 ただ、そもそもIE4以下はまともにスタイルシートに対応していない上、もはや利用者は少ないと考えられるので気にする必要はないでしょう。

おわりに

今回は、CSS Hackを使わずに、IEで発生するスタイルシート解釈上の問題に対処する方法をご紹介いたしました。

特に、IE6以下でのみ問題が発生するような場合は、スタイルシートにCSS Hackを用いて対策を書き込むよりも、 IE6以下専用の修正用スタイルシートを用意する方が、スタイルシートのソースがシンプルになって管理しやすくなるでしょう。

(Windows版の)IEだけで問題が発生する場合には、検討してみて下さい。

※残念ながら、Mac版IEでは「条件付きコメント」は使えません。 しかし、Mac版IEは1年以上前に公開自体も終了していますから、あまり気にしなくても良いかも知れません。

【関連記事】




■容量たっぷり20GB、国内通話5分無料も付いて、2970円(税込)



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。