Webブラウザ別CSSハック＆フィルタTips
連載インデックスへ
 Webブラウザ別CSSハック＆フィルタTips（2）

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

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

スターハック

  • Star HTML Selector Bug
  • Star HTML Hack

　IE 6とMac OS XのIE 5に適用します。使用方法は、適用させたいセレクタの前に「* html」と記述するだけです。スター（*）を適用するので、「スターハック」と名付けられました。

　適用したいセレクタの前に「* html」を記述することで実装できます。そのほかのモダンブラウザは「HTMLには親要素がない」と解釈し、「この記述は間違っている」として適用しません。

　しかし、IE 6やMac OS XのIE 5は、それを正しいと認識し、適用してしまいます。このハックは、IE 6のズレを直す際によく使われるハックです。

■ 構文

* html p {
    color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample01</title>
  <style type="text/css">
    * html p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

2スターハック

  • Two Star Hack

　IE 6やMac OS XのIE 5に適用します。使用方法は、IE 6やMac OS XのIE 5に適用したいセレクタの前に「* html*」を追記します。W3C CSSバリデーションには通らず、文法的には正しくありません。

　このハックは「* html（スターハック）」と「html*（スター7ハック）」を組みあわせたもので、両方のハックで適用するWebブラウザが、このハックでも適用されます。

■ 構文

* html*p{
    color:#f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample02</title>
  <style type="text/css">
    * html*p{
        color:#f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

インポータントハック

  • !important Hack

　IE 6に適用します。使用方法は、IE 6に適用させたいスタイルを下に書き、適用させたくないスタイルを上に書き「!important」を追記します。

　通常CSSは、後に記述したものを優先的に読み込みます。しかし、IE 7やモダンブラウザは後に記述されたものよりも「!important」と指定されているものを適用させます。それに比べIE 6は、「!important」を無視し、後に記述されているものを優先させます。

■ 構文

p{
     /* 通常 */
     color:#000 !important;
  
     /* IE 6以下 */
     color:#f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample03</title>
  <style type="text/css">
    p{
        /* 通常 */
        color:#000 !important;
 
        /* IE 6以下 */
        color:#f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

アンダースコアハック

  • Underscore Hack

　IE 6のみ適用します。使用方法は、IE 6のみに適用させたいプロパティの前に「_（アンダースコア）」を記述するだけです。W3C CSSバリデーションには通らず、文法的には正しくありません。

　IE 7やそのほかのモダンブラウザでは、正しい文字列として認識されないので無視するのですが、IE 6だと正常な文字列として読み込みスタイルが適用されます。

■ 構文

p {
    _color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample04</title>
  <style type="text/css">
    p {
        _color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

チャイルドセレクタハック

  • Child Selector Hack

　IE 6以外で対応します。使用方法は、IE 6のみ適用させたくないセレクタの前に「html > body」を記述するだけで使用できます。

　子セレクタを利用したハックなのですが、文法的には間違っていません。そのため、IE 7やモダンブラウザはしっかりと認識し、適用されます。しかしIE 6以下だと、Webブラウザが子セレクタに対応していないため、不明な文字列として解釈され適用されません。

■ 構文

html > body p {
    color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample05</title>
  <style type="text/css">
    html > body p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

隣接セレクタハック

  • Adjacent Sibiling Selector Hack

　IE 6以外で対応します。使用方法は、IE 6のみ適用させたくないセレクタの前に「html + body」を記述するだけです。

　隣接兄弟セレクタを利用したハックなのですが、文法的には間違っていません。そのため、IE 7やモダンブラウザはしっかりと認識し、適用されます。

　しかしIE 6以下は、Webブラウザが子セレクタに対応していないため、不明な文字列として解釈され、適用されません。

■ 構文

head + body p {
    color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample06</title>
  <style type="text/css">
    head + body p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html

オーウェンハック

  • Owen Hack

　IE 6以外で対応します。使用方法は、IE 6に適用させたくないセレクタの前に「head:first-child + body」を記述します。

　:first-child疑似クラスと隣接セレクタを組み合わせたハックです。文法に従った記述であり、IE 7やモダンブラウザ、Mac OS XのIE 5は適用されます。IE 6はセレクタに対応していないため、スタイルが適用されません。

■ 構文

head:first-child + body p {
    color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample07</title>
  <style type="text/css">
    head:first-child + body p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html

属性セレクタハック

  • Attribute Hack

　IE 6、Mac OS XのIE 5以外に適用します。使用方法は、IE 6やMac OS XのIE 5に適用させたくないセレクタに「html[xmlns]」を追記します。

　属性セレクタを使ったハックで、XHTMLで<html>要素の必須属性であるxmlnsを利用しています。IE 7やモダンブラウザで適用されます。IE 6以下では、セレクタに対応していないため、スタイルは適用されません。

■ 構文

html[xmlns] p {
    color: #f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample08</title>
  <style type="text/css">
    html[xmlns] p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　下記のような記述方法でも同じ挙動です。

body[id="test"] p{color:#f00;}
body[id~="test"] p{color:#f00;}

　また、下記のように「html[xmlns]」の後ろに「>/**/body」を追記すると、IE 7でも適用されなくなります。

html[xmlns]>/**/body p {
   color: #f00;
}

2/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]
「デザインハック」コーナーへ



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

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT