【ホームページ作成】CSSハックを使わずIEのバグに対処する方法

Internet Explorerでのみ表示がおかしい場合の対策

スタイルシートを使ってデザインしていると、他のモダンブラウザではうまく表示されるのに、 IEでのみ崩れて表示されてしまうことがあります。 IE7ではうまく表示されるのに、IE6以下ではおかしくなってしまう…という場合もあるでしょう。

そういったときには、IEにのみ別のスタイルを適用させる、「CSS Hack（ハック）」がよく使われます。 当ガイドサイトの記事でも「スタイルシートでドロップキャップを作る」の5ページ目で、Mac版IEのみを除外するCSS Hackを使っています。

CSS Hackは、様々なものが考案されています。 IEに限らず、OperaやSafariなど、特定のブラウザにのみ適用する方法や、特定のブラウザのみ除外する方法などがあります。

それらは、うまく活用すると、どんなブラウザで見てもうまく表示されるデザインを作れますが、 使いすぎるとソースが読みにくくなります。 CSS Hackは、ブラウザのバグを利用した複雑な記述方法であることが多いので、 後から見たとき、自分が何を意図して書いたものなのか、分からなくなることもあるでしょう。

そこで今回は、CSS Hackを使わない方法で、「IEでのみ表示がおかしくなる場合」に対処する方法をご紹介いたします。

IEの「条件付きコメント」を使う

IEには、HTMLの独自拡張として「条件付きコメント」（Conditional Comments）という記述方法が用意されています。 これは、HTMLのコメント（ <!-- ～ --> ）の記述方法を拡張したもので、以下のようなことが簡単に実現できます。

• IEに限定してスタイルを適用する
• IEを除外してスタイルを適用する
• IEの特定のバージョンに限定してスタイルを適用する
• IEの指定バージョン以上に限定してスタイルを適用する
• IEの指定バージョン以下に限定してスタイルを適用する

この方法を使えば、CSS Hackを使わずに、IEの表示上の問題に細かく対処することができます。
IEの問題にしか対処できない方法ですが、表示上の問題が発生するのがIEだけの場合は、この方法が便利に活用できるでしょう。

※この「条件付きコメント」は、HTMLを独自に拡張したものですから、スタイルシート以外にも活用できます。 例えば、IEにのみJavaScriptを読ませたり、IEでのみ表示されるメッセージを作ったりもできます。

※Mac版IEは、この記述方法をサポートしていません。従って、Windows版IEの問題にしか使えません。

それでは、「条件付きコメント」を活用して、IEでのスタイルシートの問題を解決してみましょう。

条件付きコメントを使う方法へ >>