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

モダンブラウザでも使えるCSSハック18選

有限会社タグパンダ
喜安亮介
2009/12/16

コンディショナルコメント

Conditional Comments

IEに適用します。使用方法は、IEのみに適用したい<style>タグの前後に、「」を記述するだけです。バージョンごとの振り分けも可能なので、より詳細な指定にも対応できます。しかし、Mac OS XのIE 5には対応していません。

　また外部CSSの読み込みにも対応していて、一般的には<link>要素を囲む形で記述されます。

■ 構文

<!--[if IE ]>
<style type="text/css">
  p {
    color: #f00;
  }
</style>
<![endif]-->

<!--[if IE ]>
  <link rel="stylesheet" type="text/css" href="test.css" />
<![endif]-->

■ コーディングサンプル（←クリックすると、実際にサンプルが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>
  <!--[if IE ]>
  <style type="text/css">
    p {
       color: #f00;
    }
  </style>
  <![endif]-->
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

<!--[if gte IE 6 ]>だと、IE 6以上
<!--[if gt IE 6 ]>だと、IE 6より上
<!--[if lte IE 6 ]>だと、IE 6以下
<!--[if lt IE 6 ]>だと、IE 6より下
<!--[if !IE 6 ]>だと、IE 6以外

例えば、IE 7以上に設定したい場合は、「<!--[if gte IE 7 ]>」と書けば適用されます。応用次第で好きなように振り分けできます。

ユーザーエージェントハック

User Agent Hack

　IEに適用します。JavaScriptでユーザーエージェントを取得し、その文字列に「MSIE」が含まれていた場合、適用します。

ユーザーエージェントの例
Mozilla/4.0 (compatible; MSIE 6.0; Windows XP)

　これを利用することで、さまざまなWebブラウザやバージョン、OSで振り分けることが可能です。サンプルでは、html上に記述していますが、このJavaScriptは、もちろん外部読み込みの形で記述しても動作します。

　W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

if(navigator.userAgent.indexOf("MSIE") != -1){
    document.writeln('');
}

　style.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>sample02</title>
  <script type="text/javascript">
  <!--
    if(navigator.userAgent.indexOf("MSIE") != -1){
      document.writeln('<link rel="stylesheet" type="text/css" href="style.css" />');
    }
  // -->
  </script>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　例として、上記コードの「MSIE」部分に下記のいすれかを記述することで、WebブラウザやOSで振り分けが可能です。

「Win」
「Mac」
「MSIE 6.0」
「MSIE 7.0」
「MSIE 8.0」
「Firefox」
「Safari」
「AppleWebKit」
「Opera」

ルートセレクタハック

:root Selector Hack

　IE以外に適用されます。使用方法は、IEに適用させたくないセレクタの前に「:root」を追加すれば使用できます。

　：root疑似クラスはFirefoxなどのモダンブラウザやMac OS XのIEで対応していますが、WindowsのIEでは対応していないため、スタイルが適用されません。「:root」はCSS3よりサポートされる予定でCSS 2ではバリデーションエラーになります。

■ 構文

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

ファーストオブタイプハック

First of Type Hack

　IE 6/7/8、Mac OS XのIE 5以外に適用します。使用方法はIEに適用させたくないセレクタの前に「body:first-of-type」を記述するだけです。

　「:first-of-type」疑似クラスは「親要素内で最初に出現する要素に適用する」という意味です。IEのみ、この疑似クラスに対応していないので適用されませんが、そのほかのWebブラウザでは対応しています。ちなみにFirefox 3では対応していませんがSafari 3では対応しています。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

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

否定Lang疑似クラスハック

Not Lang Pseudo Class Hack

　IE以外に適用します。使用方法は、IE以外に適用させたいセレクタの前に「html:not([lang*=""])」を記述するだけです。「:not()」は「()の値以外の要素に適用する」という意味です。

　また、「html[lang*=""]」は「lang属性を持ち、1つ以上その値を含んでいるものに適用する」という意味です。否定疑似クラスと内包テキストマッチング属性セレクタを用いてこの疑似クラスと属性セレクタに対応していないIEを除きます。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

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

ノットターゲットハック

Not Target Hack

　IE以外に適用します。使用方法は、IE以外に適用させたいセレクタの前に「html:not(:target)」を記述するだけです。「:not()」は「()の値以外の要素に適用する」という意味です。

　「:target」は、「アンカーリンクが指定されているものがアクティブにされた際に、それに対しスタイルを適用する」という意味です。否定疑似クラスとターゲット疑似クラスを用いて、この疑似クラスに対応していないIEを除きます。

　W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

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

構造的な疑似クラスハック

Structual Pseudo Class Hack

　IE以外に適用します。使用方法は、IE以外に適用させたいセレクタの前に「body:nth-of-type(1)」を記述するだけです。「:nth-of-type(1)」は「1番目の要素に適用する」という意味です。

　構造的な疑似クラスを用いて、この疑似クラスに対応していないIEを除きます。Safari3 にも対応しています。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

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

否定Nth Child疑似クラスハック

Not Nth Child Pseudo Class Hack

　IE、Opera以外に適用します。使用方法は、IE、Opera以外に適用させたいセレクタの前に「html:not(:nth-child(n))」を記述するだけです。「:not()」は「()の値以外の要素に適用する」という意味です。

　「:nth-child(n)」は「n番目の子要素に適用する」という意味です。否定疑似クラスと構造的な疑似クラスを用いて、この疑似クラスに対応していないIE、Operaを除きます。Safari 3にも対応しています。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

html:not(:nth-child(n)) 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:not(:nth-child(n)) p{
      color:#f00;
    }
</style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

ファーストチャイルドハック

First-child Hack

　IE 8に適用して、Mac OS XのIE 5にも適用します。使用方法は、IE8、Mac OS XのIE 5に適用させたいセレクタの前に「html:first-child」を追記するだけです。

　「:first-child」は、親要素の範囲で最初に存在する子要素のみに適用する指定なのですが、<html>要素に親要素は存在しません。そのため、通常のWebブラウザはこのハックを記述したスタイルを無視するのですが、それを間違って解釈してしまうWebブラウザがあり、それを利用し振り分けを行っています。

　また、IE 6は「:first-child」疑似クラスに対応していません。

■ 構文

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

■ 備考

　下記のように記述してもIE 8とMac OS XのIE 5に適用されます。

html:\66irst-child p{color:#f00;}

　ISO 10646による文字参照での表示です。「\66」は「f」を表します。

2/3

INDEX
Webブラウザ別CSSハック＆フィルタTips（3）　モダンブラウザでも使えるCSSハック18選
	Page1 モダンブラウザとMac OS XのIE 5でも使えるCSSハック
	Page2 コンディショナルコメントユーザーエージェントハックファーストオブタイプハック否定lang疑似クラスハックノットターゲットハック構造的な疑似クラスハック否定Nth child疑似クラスハックファーストチャイルドハック
	Page3 モズエニーリンクハックモズドキュメントハックコメントモズエニーリンクハック xmlns属性セレクタハックウェブキットハック Mac IEスターハックインポートハックメディアタイプ混在ハックホーリーハック、バックスラッシュハック【おわりに】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

モダンブラウザでも使えるCSSハック18選

コンディショナルコメント

■ 構文

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

■ 備考

ユーザーエージェントハック

■ 構文

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

■ 備考

ルートセレクタハック

■ 構文

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

ファーストオブタイプハック

■ 構文

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

否定Lang疑似クラスハック

■ 構文

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

ノットターゲットハック

■ 構文

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

構造的な疑似クラスハック

■ 構文

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

否定Nth Child疑似クラスハック

■ 構文

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

ファーストチャイルドハック

■ 構文

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

■ 備考

注目のテーマ

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

転職／派遣情報を探す

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

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

モダンブラウザでも使えるCSSハック18選

コンディショナルコメント

■ 構文

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

■ 備考

ユーザーエージェントハック

■ 構文

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

■ 備考

ルートセレクタハック

■ 構文

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

ファーストオブタイプハック

■ 構文

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

否定Lang疑似クラスハック

■ 構文

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

ノットターゲットハック

■ 構文

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

構造的な疑似クラスハック

■ 構文

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

否定Nth Child疑似クラスハック

■ 構文

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

ファーストチャイルドハック

■ 構文

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

■ 備考

注目のテーマ

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

転職／派遣情報を探す

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

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

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