ホームページ作成/ホームページ作成テクニック、小技

CSSハックを使わずIEのバグに対処する方法

特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

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でのスタイルシートの問題を解決してみましょう。

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

更新日:2007年04月12日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    4

    この記事を共有する