Webブラウザ別CSSハック＆フィルタTips
連載インデックスへ
 Webブラウザ別CSSハック＆フィルタTips（3）

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

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

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

- PR -

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

　前回同様、どちらの場合にしても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のためのハックもあります。

　これらを表にまとめます。検証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ハックの利用はリスクを見極めて慎重に

Webブラウザ別CSSハック＆フィルタTips バックナンバー 連載インデックスへ»


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


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ
  • Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に （2012/1/20）
    ノキアから売却されてQtはどうなったのか？ 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH