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

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

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

スター＋ハック

  • The Next-to-nothing Hack
- PR -

　IE 7やMac OS XのIE 5に適用します。使用方法は、適用させたいセレクタの前に「*+html」を記述するだけです。

　スターハック（* html）から考えると、全称セレクタ（*）は親要素ではなく、兄弟要素として認識するため、IE 7では適用されると考えられます。

　しかし、Mac OS XのIEや古いタイプのOperaでも認識されてしまうため、IE 7スターハック（*:first-child+html）が作られました。こちらのハックは、IE 7のみに適用可能です。

■ 構文

*+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>sample09</title>
  <style type="text/css">
    *+html p{color:#f00;}
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

IE 7 スターハック

  • IE 7 Star Hack

　IE 7のみ適用します。使用方法は、適用させたいセレクタの前に「*:first-child+html」に記述するだけです。

　:first-child疑似クラスをスター＋ハック（*+html）に追記することにより、IE 7のみに適用することが可能となりました。IE 7以外は読み込まれないので、使い勝手がよく、よく使われるハックの1つです。

■ 構文

*:first-child+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>sample10</title>
  <style type="text/css">
    *:first-child+html p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

スター7ハック

  • Star 7 Hack

　IE 7以下とMac OS XのIE 5に適用します。使用方法は、IE 6/7やMac OS XのIE 5に適用させたくないセレクタの前に「html*」を記述するだけです。

　Firefoxなどは「html*p」を1つのものとして認識してしまうので、「そのような文字列は存在しない」として適用されません。しかしIE 7などは、「html*p」を「html * p」と分けて認識するので、スタイルが適用されます。

■ 構文

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>sample11</title>
  <style type="text/css">
    html*p {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

ハッシュハック

  • Hash Hack

　IE 7以下で適用します。使用方法は、IE 6/7でのみ適用させたいプロパティの前に「#（ハッシュ）」記号を記述するだけです。

　W3C CSSバリデーションは通らないので、ほかの指定方法で記述するのが好ましいでしょう。

■ 構文

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>sample12</title>
  <style type="text/css">
    p {
        #color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

アスタリスクハック

  • Asterisk Hack
  • *property

　IE 7以下に適用します。使用方法は、IE 6/7に適用させたいプロパティの前に「*」を追記するだけです。

　このハックは、W3C CSSバリデーションではエラーになってしまいますが、IE 6用の「* html（スターハック）」やIE 7用の「*:first-child+html（IE 7 スターハック）」を使用するのに比べ、コードが短くて済むというメリットがあります。

■ 構文

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>sample13</title>
  <style type="text/css">
    p {
        *color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

全角スペースハック

  • Em Space Hack

　IE 6/7に適用します。使用方法は、IE 6/7にのみ適用したいプロパティの前に、全角スペースを入力するだけです。W3C CSSバリデーションには通らず、文法的には正しくありません。

　通常のモダンブラウザは全角スペースをエラーとして認識しますが、IE 6/7ではそれを無視してしまいます。これにより、Webブラウザごとの認識の違いによりスタイルの振り分けが可能になります。

■ 構文

p{
/* 通常 */
color:#000;
 
/* IE 6/7 */
　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>sample14</title>
  <style type="text/css">
    p{
        /* 通常 */
color:#000;
 
        /* IE 6/7 */
　color:#f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

タイトル属性ハック

  • title Hack

　IE 6/7とMac OS XのIEに適用します。使用方法は、IE 6/7とMac OS XのIEに適用したい<link>要素にtitle属性を記述します。ただし、title属性は2つ以上ないとハックとして機能しません。

　モダンブラウザでは、title属性が指定していないCSS（固定スタイルシート）と、title属性が指定してあるCSS（優先スタイルシート）を読み込みます。しかし、優先スタイルシートが2つ以上あった場合、上に記述してあるものだけ読み込みます。

　つまり今回の例では、「test2」のCSSだけ読み込まれないのです。対してIE6/7とMac OS XのIEは、すべてのスタイルシートを読み込んでしまいます。

■ 構文

<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" type="text/css" href="test1.css" media="all" title="test1">
<link rel="stylesheet" type="text/css" href="test2.css" media="all" title="test2">

■ コーディングサンプル（←クリックすると、実際にサンプルが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>sample15</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="all">
  <link rel="stylesheet" type="text/css" href="test1.css" media="all" title="test1">
  <link rel="stylesheet" type="text/css" href="test2.css" media="all" title="test2">
</head>
<body>
  <p>対応Webブラウザではテキストが、赤く大きく下線のある状態で表示されます。  <br />
  それ以外のWebブラウザでは下線は表示されません。</p>
</body>
</html>

■ 備考

　<style>要素でもtitle属性を追記するだけで使用できます。ただし、対応Webブラウザが変わり、IE 8とOpera 10でも適用できます。

<style type="text/css">
  p {
      color: #f00;
  }
</style>
 
<style type="text/css"  title="test1">
  p {
      font-size:200%;
  }
</style>
 
<style type="text/css" title="test2">
  p {
      text-decoration:underline;
  }
</style>

コメントハック

  • Comment Hack

　Mac OS XのIE 5には適用されません。使用方法は、Mac OS XのIE 5を適用させたくないセレクタの後ろにコメントアウト（/* */）を追記します。

　単純にコメントアウトを記述しているだけなので、W3C CSSバリデーションにも通り、Mac OS XのIE 5以外のWebブラウザでは影響しません。

　コメントアウトの読み込みのバグを利用したもので、記述する場所によって対応するWebブラウザが変わります。

■ 構文

p/* */ {
    color: #f00;
}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!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>sample16</title>
  <style type="text/css">
    p/* */ {
        color: #f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　下記の書き方でも同じ挙動になり、W3C CSSバリデーションにも通ります。

p/**/ {
    color: #f00;
}
 
p {
    color/**/: #f00;
}
 
p {
    color/* */: #f00;
}
 
p{
   color/**/:/**/#f00;
}

　下記の書き方でIE 6、7以外に適用し、W3C CSSバリデーションに通ります。

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

　下記の書き方でIE 6/7、Mac OS XのIE 5以外に適用しますが、W3C CSSバリデーションには通りません。

head~/* */body p{color:#f00;}

　下記の書き方でIE 6/7、Mac OS XのIE 5に適用しますがW3C CSSバリデーションには通りません。

/**/ html* p{color:#f00;}

次回は、モダンブラウザでも使えるCSSハック

　今回は、まだまだよく使われると思われるIE 6とIE 7で使うCSSハックを紹介しましたが、いかがでしたでしょうか。

　次回は、IE 8やFirefox 3.5、Safari 4、Google Chrome 3、Opera 10などいわゆる「モダンブラウザ」と呼ばれるWebブラウザで使えるCSSハックを、今回と同じくWebブラウザの対応表を交えながら紹介する予定ですので、ご期待ください。

　また、「シェアは皆無といっていいレベル」だと冒頭で述べたMac OS XのIE 5のためのCSSハックもおまけで紹介します。なお、今回紹介したコメントハックも備考での書き方を除けば「Mac OS XのIE 5のためのCSSハック」といえるものでしたが、備考での書き方を優先して今回の「IE 6とIE 7のためのCSSハック16選」の1つとしました。

■ ＠IT関連記事

いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けないリッチクライアント技術（4）　今回はXHTMLとCSSを使ったWeb標準規格を紹介。その歴史や役割、さらにはHTMLとXHTMLの違いやCSSについても解説
「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/19
D89 Web標準HTMLタグリファレンス
Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします
WebデザイナのためのHTMLチューニング入門
Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう
業務で使える！ 無料Webサイト作成ツール集
Webオーサリングツールを使ってみよう：特別編　HTML＋CSS、JavaScriptでWebぺージを作るときにどんなツールを使ってますか？ 無料でも便利なものがたくさんあります
「リッチクライアント ＆ 帳票」フォーラム 2007/7/6
Webブラウザ非互換性の温床となったのは何か？
AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう
「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/3
Webブラウザ標準適合性のわなとAcidテストの正体
AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む
「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/31
テキストエディタでWebサイト構築をガンバル人へ
どこまでできる？ 無料ツールでWebサイト作成（6）　テキストエディタで「あえて」Webページをコーディングしている人のために便利な無料の補助ツールをいくつか紹介します
「リッチクライアント ＆ 帳票」フォーラム 2008/2/5

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

3/3  

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

Webブラウザ別CSSハック＆フィルタTips バックナンバー 連載インデックスへ»


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


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH