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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

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

本日 月間