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

更新日:2007年04月12日

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

特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。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でのスタイルシートの問題を解決してみましょう。

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

1 2 3
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…

続きを読む

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

マネしたくなるアイデア住宅

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?