Movatterモバイル変換

Windows Server

.NET

Server & Storage

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

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;}

■コーディングサンプル

<!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 Star Hack

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

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

■ 構文

*:first-child+html p {    color: #f00;}

■コーディングサンプル

<!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>

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;}

■コーディングサンプル

<!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;}

■コーディングサンプル

<!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;}

■コーディングサンプル

<!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;}

■コーディングサンプル

<!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">

■コーディングサンプル

<!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;}

■コーディングサンプル

<!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;}

　今回は、まだまだよく使われると思われる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つとしました。

　今回はXHTMLとCSSを使ったWeb標準規格を紹介。その歴史や役割、さらにはHTMLとXHTMLの違いやCSSについても解説

　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む


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

[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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する