2009/02/07
【GROWメール】CSSハックを使わずIEのバグに対処する方法
━━≪ GROWマガジン ≫━━━━━━━━━━━━━━━━━━━━
┌──┐
｜＼／｜CSSハックを使わずIEのバグに対処する方法
└──┘
━━━━━━━━━━━━━━━━ http://www.grow-planning.com/
スタイルシートを使ってデザインしていると、
他のブラウザではうまく表示されるのに、
IEでのみ崩れて表示されてしまうことがありますね。
IE7ではうまく表示されるのに、
IE6以下ではおかしくなってしまう…
という場合もあるでしょう。
そういったときには、
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でのみ表示されるメッセージを作ったりもできます。
■□「条件付きコメント」とは
スタイルの適用方法を説明する前に、
「条件付きコメント」
の記述方法を説明しておきます。
IEの独自拡張である「条件付きコメント」は、
以下のような書式でHTML中に記述します。
<!--[if 条件式 ]>
(中身)
<![endif]-->
「条件式」の部分に合致するブラウザのみが、
「中身」の部分に記述されたHTMLを読みます。
それ以外のブラウザは、
「中身」の部分をコメントだと判断するため、
無視します。
※HTMLの文法的には、
条件式や中身の部分も含めて全体が
「コメント」になっています。
以下に、具体的な記述例を記載します。
■最も簡単な記述
<!--[if IE ]>
<p>この表示はIEだけで見えます。</p>
<![endif]-->
上記のソースをHTML中に記述すると、
IEで閲覧した場合だけ、
「この表示はIEだけで見えます。」
という文字列が表示されます。
※「条件付きコメント」は、
IE5から搭載された機能なため、
IE4以下は対象外です。
「<!--[if IE ]>」〜「<![endif]-->」
までの領域には、
通常のHTMLを何行でも記述できます。
ただし、
コメント（<!-- 〜 -->）の
記述を含めることはできませんので注意して下さい！
■対象バージョンの幅を指定する記述
IE5「以上」を対象にする場合は、
次のような記述になります。
「 gte 」は、「Greater-Than or Equal」の略で
「以上」の意味です。
<!--[if gte IE 5 ]>
<p>この表示はIE5以上で見えます。</p>
<![endif]-->
IE5「より上」を対象にする場合は、
次のような記述になります。
「 gt 」は、「Greater-Than」の略で
「より上」の意味です。
※「IE5より上」の場合「IE5自身」は含みません。
<!--[if gt IE 5 ]>
<p>この表示はIE5より上のバージョンで見えます。</p>
<![endif]-->
IE6「以下」を対象にする場合は、
次のような記述になります。
「 lte 」は、「Less-Than or Equal」の略で
「以下」の意味です。
<!--[if lte IE 6 ]>
<p>この表示はIE6以下で見えます。</p>
<![endif]-->
IE6「未満」を対象にする場合は、
次のような記述になります。
「 lt 」は、「Less-Than」の略で
「未満」の意味です。
<!--[if lt IE 6 ]>
<p>この表示はIE6未満で見えます。</p>
<![endif]-->
■指定バージョン「以外」を対象にする記述
「条件付きコメント」には
「否定」の
記述方法もあるため、指定した条件式に
合致しないブラウザのみを対象にすることもできますよ。
<!--[if !IE 6 ]>
<p>この表示はIE6以外で見えます。</p>
<![endif]-->
上記の場合は、
IE6以外のIEでのみ表示されます。
つまり、
IE5やIE7では表示されます。
このような記述が必要になることは、
あまりないでしょうね。
■IEすべてを対象外にする記述
これまでの記述はすべて、
「IEのみを対象にする」記述でした。
その逆に、
「IEには読ませず、IE以外のすべてのブラウザを対象にする」
記述方法も用意されています。
<![if !IE ]>
<p>この表示はIE以外のブラウザで見えます。</p>
<![endif]>
上記の記述は、IE以外のブラウザでのみ表示されます。
（ただし、IE4以下は条件付きコメントに対応していないため
「その他のブラウザ」と同じ扱いになります。
ですから、IE4以下も表示対象になります。）
※この「IEを除外する記述」は、
今までの条件付きコメントと異なり、
「 <!--[if… 」ではなく「 <![if… 」
で始まる点に注意して下さい。
終わりも
「 <![endif]--> 」ではなく「 <![endif]> 」
になります。
（この記述方法だけは、HTMLの文法的には誤りになります。
文法チェッカーで調べるとエラーになります。）
他にもいろいろ記述方法のバリエーションはありますが、
長くなるので・・・
またの機会にさせてもらいます。
■□「条件付きコメント」を使って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以下でのみ問題が発生するような場合は、
スタイルシートにCSS Hackを用いて対策を書き込むよりも、
IE6以下専用の修正用スタイルシートを用意する方が、
スタイルシートのソースが
シンプルになって管理しやすくなるでしょう。
（Windows版の）IEだけで問題が発生する場合には、
検討してみて下さい。
以上、長々と失礼しました。
ｂｙ.グロママ
http://www.grow-planning.com
◆◇===========================================================◇◆
センスの良いホームページでネットショップを運営しましょう！
http://www.grow-planning.com/p01.html
◆◇===========================================================◇◆
◆━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
毎日NEW情報をてんこもりにご紹介!!
読まなきゃそん♪そん♪ですよ(〇^∀')O*.b
最後までご覧いただきまして本当にありがとうございます(*:U:*)ノ♪*゜
それではまた、次回のメルマガでお会いしましょう！(^▽^)ノ☆彡
***********************************************************
札幌市中央区南1条西13丁目4-52山新ビル4F
株式会社グロウプランニング
URL：http://www.grow-planning.com/
