連載インデックスへ

Webブラウザ別CSSハック＆フィルタTips（2）

IE 6とIE 7のためのCSSハック16選

有限会社タグパンダ
喜安 亮介
2009/11/17

Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部）

Webブラウザ別CSSハック一覧表

　前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。

　今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。

• IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック）
  • IE 6のみに効くハック
    • スターハック
    • 2スターハック
    • アンダースコアハック
    • インポータントハック
  • IE 6のみに効かないハック
    • チャイルドセレクタハック
    • 隣接セレクタハック
    • オーウェンハック
    • 属性セレクタハック
• IE 7をハック（IE 7のみに効く、もしくはIE 7のみに効かないハック）
  • IE 7のみに効くハック
    • スター＋ハック
    • IE 7スターハック
  • IE 7のみに効かないハックは、なし
• IE 6/7をハック（IE 6とIE 7に効く、もしくはIE 6とIE 7に効かないハック）
  • IE 6とIE 7に効くハック
    • スター7ハック
    • ハッシュハック
    • アスタリスクハック
    • 全角スペースハック
    • タイトル属性ハック
  • IE 6とIE 7に効かないハック
    • コメントハック

　これらを表にまとめます。検証Webブラウザは、下記の通りです。

• Windows：IE 6、IE 7、IE 8、Firefox 3.5、Safari 4、Chrome 3、Opera 10
• Mac OS X：IE 5、Firefox 3.5、Safari 4、Opera 10

表　Webブラウザ別CSSハック（1）（表の完全版は連載インデックスにあります）

名称 Windows Mac OS X バリデーション IE 6 IE 7 IE 8 Firefox 3.5 Safari 4 Chrome 3 Opera 10 IE 5 Firefox 3.5 Safari 4 Opera 10 IE 6をハック スターハック ○ × × × × × × ○ × × × ○ 2スターハック ○ × × × × × × ○ × × × × アンダースコアハック ○ × × × × × × × × × × × インポータントハック ○ × × × × × × × × × × ○ チャイルドセレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 隣接セレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ オーウェンハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 属性セレクタハック × ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ IE 7をハック スター＋ハック × ○ × × × × × ○ × × × ○ IE7スターハック × ○ × × × × × × × × × × IE 6/7をハック スター７ハック ○ ○ × × × × × ○ × × × × ハッシュハック ○ ○ × × × × × × × × × × アスタリスクハック ○ ○ × × × × × × × × × × 全角スペースハック ○ ○ × × × × × × × × × × タイトル属性ハック（<link>要素） ○ ○ × × × × × ○ × × × ○ タイトル属性ハック（<style>要素） ○ ○ ○ × × × ○ ○ × × ○ ○ コメントハック(p/* */ {}) ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ コメントハック(html>/**/body p {}) × × ○ ○ ○ ○ ○ ○ ○ ○ ○ × コメントハック(head~/* */body p {}) × × ○ ○ ○ ○ ○ × ○ ○ ○ × コメントハック（/**/ html* p {}） ○ ○ × × × × × ○ × × × ×

• IE 6以外のすべてのWebブラウザで読み込む → IE 6のハックとして機能する
• 逆に、IE 6だけ読み込む → IE 6のハックとして機能する

　どちらの場合にしてもIE 6とほかのWebブラウザとの挙動を分けられるので、IE 6用のハックとして分類できることになります。また、そのほかのWebブラウザのハックに関しても同じ分け方です。

　ちなみに、Mac OS XのIE 5のシェアは皆無といっていいレベルなので、Mac OS XのIE 5以外のWebブラウザを分類する際には、Mac OS XのIE 5の○×は無視してあります。

　今回、紹介するCSSハックは、主に<p>要素を例にしていますが、ほかの要素でも書き方を同じにして、pの部分を書き換えれば適用できます。ただし一部のハックでは、要素が限定されるものもあります。

　CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS／スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。

1/3

INDEX
Webブラウザ別CSSハック＆フィルタTips（2）　 IE 6とIE 7のためのCSSハック16選
	Page1 Webブラウザ別CSSハック一覧表
	Page2 スターハック 2スターハック アンダースコアハック インポータントハック チャイルドセレクタハック 隣接セレクタハック オーウェンハック 属性セレクタハック
	Page3 スター＋ハック IE 7スターハック スター7ハック ハッシュハック アスタリスクハック 全角スペースハック タイトル属性ハック コメントハック 次回は、モダンブラウザでも使えるCSSハック

[an error occurred while processing this directive]

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）