連載インデックスへ

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

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

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

Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部）

モダンブラウザとMac OS XのIE 5でも使えるCSSハック

　前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。

• IE 6/7/8をハック（IE 6とIE 7、IE 8に効く、もしくはIE 6とIE 7とIE 8に効かないハック）
  • IE 6とIE 7、IE 8に効くハック
    • コンディショナルコメント
    • ユーザーエージェントハック
  • IE 6とIE 7とIE 8に効かないハック
    • ルートセレクタハック
    • ファーストオブタイプハック
    • 否定lang疑似クラスハック
    • ノットターゲットハック
    • 構造的な疑似クラスハック
    • 否定Nth child疑似クラスハック
• IE 8のみに効くハック
  • ファーストチャイルドハック
• IE 7、Firefoxに効くハック
  • モズエニーリンクハック
• Firefoxのみに効くハック
  • モズドキュメントハック
  • コメントモズエニーリンクハック
• Operaのみに効くハック
  • xmlns属性セレクタハック
• Safari、Google Chromeに効くハック
  • ウェブキットハック

　前回同様、どちらの場合にしてもIE 6/7/8とほかのWebブラウザとの挙動を分けられるので、IE 6/7/8用のハックとして分類できることになります。また、そのほかのWebブラウザのハックに関しても同じ分け方です。

• IE 6/7/8以外のすべてのWebブラウザで読み込む → IE 6/7/8のハックとして機能する
• 逆に、IE 6/7/8で読み込む → IE 6/7/8のハックとして機能する

　ちなみに、Mac OS XのIE 5のシェアは皆無といっていいレベルなので、Mac OS XのIE 5以外のWebブラウザを分類する際には、Mac OS XのIE 5の○×は無視してあります。

　一方で、Mac OS XのIE 5のためのハックもあります。

• Mac OS XのIE 5のみに効くハック
  • Mac IEスターハック
• Mac OS XのIE 5に効かないハック
  • インポートハック
  • メディアタイプ混在ハック
  • ホーリーハック、バックスラッシュハック

　これらを表にまとめます。検証Webブラウザは、下記の通りです。

• Windows：IE 6、IE 7、IE 8、Firefox 3.5、Safari 4、Chrome 3、Opera 10
• Mac OS X：IE 5、Firefox 3.5、Safari 4、Opera 10

表　Webブラウザ別CSSハック（2）（表の完全版は連載インデックスにあります）

名称 Windows Mac OS X バリデーション IE 6 IE 7 IE 8 Firefox 3.5 Safari 4 Chrome 3 Opera10 IE 5 Firefox 3.5 Safari 4 Opera 10 IE 6/7/8をハック コンディショナルコメント ○ ○ ○ × × × × × × × × ○ ユーザーエージャントハック ○ ○ ○ × × × × ○ × × × × ルートセレクタハック × × × ○ ○ ○ ○ ○ ○ ○ ○ × ファーストオブタイプハック × × × ○ ○ ○ ○ × ○ ○ ○ × 否定lang疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ × ノットターゲットハック × × × ○ ○ ○ ○ × ○ ○ ○ × 構造的な疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ × 否定Nth child疑似クラスハック × × × ○ ○ ○ × × ○ ○ × × IE 8をハック ファーストチャイルドハック × × ○ × × × × ○ × × × ○ IE 7、Firefoxをハック モズエニーリンクハック × ○ × ○ × × × ○ ○ × × × Firefoxをハック モズドキュメントハック × × × ○ × × × × ○ × × × コメントモズエニーリンクハック × × × ○ × × × ○ ○ × × × Operaをハック xmlns属性セレクタハック × × × × × × ○ × × × ○ × Safari、Chromeをハック ウェブキットハック × × × × ○ ○ × × × ○ × × Mac OS XのIE 5をハック MacIEスターハック × × × × × × × ○ × × × ○ インポートハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ メディアタイプ混合ハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ ホーリーハック、 バックスラッシュハック （/* \*/） ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ ホーリーハック、 バックスラッシュハック （/* \*//*/） × × × × × × × ○ × × × ○ ホーリーハック、 バックスラッシュハック （/*\*/） × × ○ × × × × ○ × × × ○

　今回、紹介するCSSハックは、主に<p>要素を例にしていますが、ほかの要素でも書き方を同じにして、pの部分を書き換えれば適用できます。ただし一部のハックでは、要素が限定されるものもあります。

　CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS／スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。

1/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]

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

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