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

IE 6とIE 7のためのCSSハック16選

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

Webブラウザ別CSSハック一覧表

- PR -

　前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。

　今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。

　これらを表にまとめます。検証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ハック（1）（表の完全版は連載インデックスにあります）
　 名称 Windows Mac OS X バリデーション
IE 6 IE 7 IE 8 Firefox 3.5 Safari 4 Chrome 3 Opera 10 IE 5 Firefox 3.5 Safari 4 Opera 10
IE 6をハック スターハック ○ × × × × × × ○ × × × ○
2スターハック ○ × × × × × × ○ × × × ×
アンダースコアハック ○ × × × × × × × × × × ×
インポータントハック ○ × × × × × × × × × × ○
チャイルドセレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
隣接セレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
オーウェンハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
属性セレクタハック × ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
IE 7をハック スター＋ハック × ○ × × × × × ○ × × × ○
IE7スターハック × ○ × × × × × × × × × ×
IE 6/7をハック スター７ハック ○ ○ × × × × × ○ × × × ×
ハッシュハック ○ ○ × × × × × × × × × ×
アスタリスクハック ○ ○ × × × × × × × × × ×
全角スペースハック ○ ○ × × × × × × × × × ×
タイトル属性ハック（<link>要素） ○ ○ × × × × × ○ × × × ○
タイトル属性ハック（<style>要素） ○ ○ ○ × × × ○ ○ × × ○ ○
コメントハック(p/* */ {}) ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
コメントハック(html>/**/body p {}) × × ○ ○ ○ ○ ○ ○ ○ ○ ○ ×
コメントハック(head~/* */body p {}) × × ○ ○ ○ ○ ○ × ○ ○ ○ ×
コメントハック（/**/ html* p {}） ○ ○ × × × × × ○ × × × ×
  • IE 6以外のすべてのWebブラウザで読み込む → IE 6のハックとして機能する
  • 逆に、IE 6だけ読み込む → IE 6のハックとして機能する

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

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

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

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

  1/3

　INDEX
Webブラウザ別CSSハック＆フィルタTips（2）　
IE 6とIE 7のためのCSSハック16選
Page1
Webブラウザ別CSSハック一覧表
  Page2
スターハック
2スターハック
アンダースコアハック
インポータントハック
チャイルドセレクタハック
隣接セレクタハック
オーウェンハック
属性セレクタハック
  Page3
スター＋ハック
IE 7スターハック
スター7ハック
ハッシュハック
アスタリスクハック
全角スペースハック
タイトル属性ハック
コメントハック
次回は、モダンブラウザでも使える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