モダンブラウザでも使える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]
「デザインハック」コーナーへ |
- 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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|