ちょっとサイトをステキにする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スターハック × × × × × × × × × × ×
スター7ハック × × × × × × × × ×
ハッシュハック × × × × × × × × × ×
アスタリスクハック × × × × × × × × × ×
全角スペースハック × × × × × × × × × ×
タイトル属性ハック
(<link>要素)
× × × × × × × ×
タイトル属性ハック
(<style>要素)
× × × × ×
コメントハック
(p/* */ {})
×
コメントハック
(html>/**/body p {})
× × ×
コメントハック
(head~/* */body p {})
× × × ×
コメントハック
(/**/ html* p {})
× × × × × × × × ×
コンディショナルコメント × × × × × × × ×
ユーザーエージェントハック × × × × × × × ×
ルートセレクタハック × × × ×
ファーストオブタイプハック × × × × ×
否定lang疑似クラスハック × × × × ×
ノットターゲットハック × × × × ×
構造的な疑似クラスハック × × × × ×
否定Nth child疑似クラスハック × × × × × × ×
ファーストチャイルドハック × × × × × × × × ×
モズエニーリンクハック × × × × × × × ×
モズドキュメントハック × × × × × × × × × ×
コメントモズエニーリンクハック × × × × × × × × ×
xmlns属性セレクタハック × × × × × × × × × ×
ウェブキットハック × × × × × × × × ×
MacIEスターハック × × × × × × × × × ×
インポートハック ×
メディアタイプ混合ハック ×
ホーリーハック
バックスラッシュハック
(/* \*/)
×
ホーリーハック
バックスラッシュハック
(/* \*//*/)
× × × × × × × × × ×
ホーリーハック
バックスラッシュハック
(/*\*/)
× × × × × × × × ×

デザインハック TOPへ

@IT Special

- PR -

HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH