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

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

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

スター＋ハック

The Next-to-nothing Hack

　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ハック

[an error occurred while processing this directive]

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

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する

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

デザインハック

注目のテーマ

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

本日月間

＠IT

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

スター＋ハック

■ 構文

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

IE 7 スターハック

■ 構文

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

スター7ハック

■ 構文

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

ハッシュハック

■ 構文

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

アスタリスクハック

■ 構文

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

全角スペースハック

■ 構文

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

タイトル属性ハック

■ 構文

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

■ 備考

コメントハック

■ 構文

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

■ 備考

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

■ ＠IT関連記事

注目のテーマ

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

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】

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

スター＋ハック

■ 構文

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

IE 7 スターハック

■ 構文

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

スター7ハック

■ 構文

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

ハッシュハック

■ 構文

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

アスタリスクハック

■ 構文

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

全角スペースハック

■ 構文

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

タイトル属性ハック

■ 構文

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

■ 備考

コメントハック

■ 構文

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

■ 備考

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

■ ＠IT関連記事

注目のテーマ

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

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】

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