* CSSハック [#pd12f8c6] ** よく使うCSSハック [#z9cf4209] 予備知識。 - スターハック("*")は基本的にIEに適用され、それ以外に適用されない。 - セレクタ(selector)とは、タグ、クラス、IDのことを指す。 - モダンブラウザとは、Firefox、Opera などのこと。 *** IE6以下に適用(IE7とモダンブラウザには適用されない) [#pd930236] * html (selector) { } *** IE7のみに適用(IE7以外には適用されない) [#n730f417] *+html (selector) { } または、 *:first-child+html (selector) { } *** 全てのIEに適用(IE以外には適用されない) [#c623c6de] *+html (selector), *html (selector) { } または、 *:first-child+html (selector), *html (selector) { } *** IE7を含むモダンブラウザに適用(IE6以下には適用されない) [#b7ca9484] html>body (selector) { } *** IEを除くモダンブラウザに適用(IEには適用されない) [#oc37f9c2] html>/**/body (selector) { } *** よく使うパターン [#p3649bb6] div.sample クラスに上手くスタイルをあてる。 #code(HTML){{ <style type="text/css"> /* IE以外に適用 */ div.sample { max-width:100%; max-height:500px; overflow:auto; position:relative; } /* IE7に適用 */ *:first-child+html div.sample { width:650px; height:180px; overflow:auto; position:relative; } /* IE6以前に適用 */ * html div.sample { width:650px; height:180px; overflow:auto; position:relative; } </style> }} より後に定義されたスタイルが優先されるという仕様を利用する。 上記の場合、まずモダンブラウザ向けの設定をして、 それ以降に、IEのみ設定を上書きさせている。 *** 参考サイト [#p8189d25] - [[CSS hacks:http://www.webdevout.net/css-hacks]] - [[IE7 を含むモダンブラウザ向けの CSS ハックまとめ:http://www.lucky-bag.com/archives/2006/06/css-hacks.html]] ** IEのコンディショナル(条件付)コメント [#d56905dd] IEのみ、レンダリング対象として読み取られる記法がある。 これを使えば、IE以外はコメントとして扱われて読み取られず、IEのみをターゲットにできる。 *** 基本的な記法 [#xa8076d1] <!--[if (expression)]> <![endif]--> 上記コメントにはさまれた部分の記述は、IEのみ読み取られる。 expression は、その記述を読み取る条件。 次のように書く。 [comparison] [feature] [version] - comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。 -- lt : 指定バージョンより下(指定バージョンは含まない)。 -- gt : 指定バージョンより上(指定バージョンは含まない)。 -- lte : 指定バージョン以下(指定バージョンを含む)。 -- gte : 指定バージョン以上(指定バージョンを含む)。 - feature : ブラウザの種類。今のところ"IE"しか対応していない。 - version : ブラウザのバージョン。&br; コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (or 8) *** IE7以上に適用 [#o6f9fb1e] <!--[if gte IE 7]> <![endif]--> *** IE6以上に適用 [#fc83b083] <!--[if gte IE 6]> <![endif]--> *** IE6以下に適用 [#nc2e7e91] <!--[if lte IE 6]> <![endif]--> *** IE5.5以下に適用 [#a2620884] <!--[if lt IE 6]> <![endif]--> *** 全てのIEに適用 [#tbbbf8c4] <!--[if IE]> <![endif]--> *** 参考サイト [#pe7b43d0] - [[正式版完全対応! Internet Explorer 7 CSS攻略法:http://journal.mycom.co.jp/special/2007/ie7/017.html]] - [[About Conditional Comments:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp]] - [[Cascading Style Sheet Compatibility in Internet Explorer 7:http://msdn2.microsoft.com/en-us/library/bb250496.aspx]] ----- [[MLEXP. Wiki]] #googleads(1,1)