Webブラウザ別CSSハック&フィルタTips
連載インデックスへ
Webブラウザ別CSSハック&フィルタTips(3)

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

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

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

  • Conditional Comments

 IEに適用します。使用方法は、IEのみに適用したい<style>タグの前後に、「<!--[if IE ]>」「<![endif]-->」を記述するだけです。バージョンごとの振り分けも可能なので、より詳細な指定にも対応できます。しかし、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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

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

本日 月間