【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (17) 04-03 CSSハックの利用(2) | クリエイティブ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

クリエイティブ

急上昇ワード

[

]

【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

17 04-03 CSSハックの利用(2)

エ・ビスコム・テック・ラボ　 [2007/01/18]

印刷

先頭
前へ
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- ／18
次へ
最後

html > body

子セレクタを利用したハック。文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。IE6以下ではセレクタに未対応のため、設定は適用されない。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-6 sample04-03-06.html

html > body h1 {color:red}

<h1>見出し</h1>

head + body

隣接セレクタを利用したハック。文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。IE6以下ではセレクタに未対応のため、設定は適用されない。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-7 sample04-03-07.html

head + body h1 {color:red}

<h1>見出し</h1>

head:first-child + body

:first-child疑似クラスと隣接セレクタを組み合わせたハック。文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。IE6以下ではセレクタに未対応のため、設定は適用されない。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-8 sample04-03-08.html

head:first-child + body h1 {color:red}

<h1>見出し</h1>

html[xmlns]

属性セレクタを使ったハック。XHTMLで<html>要素の必須属性であるxmlnsを利用している。HTMLではxmlnsを記述する必要がないため、このハックは使用できない。文法に従った記述であり、IE7とモダンブラウザに設定が適用される。IE6以下ではセレクタに未対応のため、設定は適用されない。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-9 sample04-03-09.html

html[xmlns] h1 {color:red}

<h1>見出し</h1>

html[xmlns]>/**/body

属性セレクタと子セレクタ、コメントを組み合わせたもので、IEの未対応機能とバグを利用したハック。文法に従った記述であり、IE以外のモダンブラウザに設定が適用される。

なお、属性セレクタを指定せず「html>/**/body」という形で記述すると、モダンブラウザの他にMac版IEにも設定が適用される。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-10 sample04-03-10.html

html[xmlns]>/**/body h1 {color:red}

<h1>見出し</h1>

property /**/:value

コメントハックと呼ばれ、IE6のバグを利用することで、Standardモード(標準準拠モード)で表示したIE6だけに設定を適用しないハック。記述形式は文法に従ったものとなっている。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-3-11 sample04-03-11.html

h1 {color /**/:red}

<h1>見出し</h1>

/* \///、/* \*/

バックスラッシュハックと呼ばれ、Mac版IE5だけに適用する設定、または適用しない設定を記述することができる。記述形式は標準に従ったものとなっている。

たとえば、以下のように指定すると、Mac版IE5では文字の色が赤く、それ以外では青く表示される。標準に準拠したブラウザでは「/*」から「*/」までをコメントとして認識するが、Mac版IE5では「*/」の前に「\(バックスラッシュ/円マーク)」を記述すると、「*/」が認識されなくなる。これにより、Mac版IE5では「/* \*//*/ ～ /**/」の中身が適用され、「/* \*/ ～ /**/」の中身が適用されなくなる。