ちょっとサイトをステキにするCSSの基礎

連載インデックス
「Webブラウザ別CSSハック＆フィルタTips」

Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします
　
IE 6で泣かないための、9つのCSSハック
 Webブラウザ別CSSハック＆フィルタTips（1）　Webブラウザの違いにより起こるレイアウトの表示ずれ問題。ユーザーの多いIE 6での問題を解決するテクニックを紹介します
  1. 透過PNGを表示させる方法
  2. min-width、max-widthを使いたい
  3. min-heightを対応させる方法
  4. heightを100％にする方法
  5. フロート時の2倍マージンを通常に戻す方法
  6. リストの縦並びメニュー
  7. リサイズ時にずれる
  8. フロート時にテキストが3pxずれてしまっていた場合
  9. 外側の要素にoverflow:auto;を指定していた場合
IE 6とIE 7のためのCSSハック16選
 Webブラウザ別CSSハック＆フィルタTips（2）　Webブラウザごとに使えるかどうかの表を交えながらIE 6/7のためのCSSハックを紹介。文法的に正しいかどうかも一目瞭然！
モダンブラウザでも使えるCSSハック18選
 Webブラウザ別CSSハック＆フィルタTips（3）　FirefoxやSafari、Chrome、Opera、IE 6/7/8そしてMacのIE 5のためのCSSハックを紹介。リスクを見極めて慎重に利用しよう

表　Webブラウザ別CSSハック（※表の見方は連載第2回と第3回をご参照ください）（下記、IE＝Internet Explorer、Ff＝Firefox 3.5、Sa＝Safari 4、Ch＝Chrome 3、Op＝Opera 10）
名称 Windows Mac OS X バリ
デー
ション
IE 6 IE 7 IE 8 Ff Sa Ch Op IE 5 Ff Sa Op
スターハック ○ × × × × × × ○ × × × ○
2スターハック ○ × × × × × × ○ × × × ×
アンダースコアハック ○ × × × × × × × × × × ×
インポータントハック ○ × × × × × × × × × × ○
チャイルドセレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
隣接セレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
オーウェンハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
属性セレクタハック × ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
スター＋ハック × ○ × × × × × ○ × × × ○
IE7スターハック × ○ × × × × × × × × × ×
スター７ハック ○ ○ × × × × × ○ × × × ×
ハッシュハック ○ ○ × × × × × × × × × ×
アスタリスクハック ○ ○ × × × × × × × × × ×
全角スペースハック ○ ○ × × × × × × × × × ×
タイトル属性ハック
（<link>要素）		 ○ ○ × × × × × ○ × × × ○
タイトル属性ハック
（<style>要素）		 ○ ○ ○ × × × ○ ○ × × ○ ○
コメントハック
（p/* */ {}）		 ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
コメントハック
（html>/**/body p {}）		 × × ○ ○ ○ ○ ○ ○ ○ ○ ○ ×
コメントハック
（head~/* */body p {}）		 × × ○ ○ ○ ○ ○ × ○ ○ ○ ×
コメントハック
（/**/ html* p {}）		 ○ ○ × × × × × ○ × × × ×
コンディショナルコメント ○ ○ ○ × × × × × × × × ○
ユーザーエージェントハック ○ ○ ○ × × × × ○ × × × ×
ルートセレクタハック × × × ○ ○ ○ ○ ○ ○ ○ ○ ×
ファーストオブタイプハック × × × ○ ○ ○ ○ × ○ ○ ○ ×
否定lang疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ ×
ノットターゲットハック × × × ○ ○ ○ ○ × ○ ○ ○ ×
構造的な疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ ×
否定Nth child疑似クラスハック × × × ○ ○ ○ × × ○ ○ × ×
ファーストチャイルドハック × × ○ × × × × ○ × × × ○
モズエニーリンクハック × ○ × ○ × × × ○ ○ × × ×
モズドキュメントハック × × × ○ × × × × ○ × × ×
コメントモズエニーリンクハック × × × ○ × × × ○ ○ × × ×
xmlns属性セレクタハック × × × × × × ○ × × × ○ ×
ウェブキットハック × × × × ○ ○ × × × ○ × ×
MacIEスターハック × × × × × × × ○ × × × ○
インポートハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
メディアタイプ混合ハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
ホーリーハック、
バックスラッシュハック
（/* \*/）		 ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
ホーリーハック、
バックスラッシュハック
（/* \*//*/）		 × × × × × × × ○ × × × ○
ホーリーハック、
バックスラッシュハック
（/*\*/）		 × × ○ × × × × ○ × × × ○

デザインハック　TOPへ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

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

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