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

IE 6で泣かないための、9つのCSSハック

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

最も多く使われているのに……、いや、だからこそ

　多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。

　IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザーはこのWebブラウザを使っています。もっとも、Web関連の仕事をしている方は、IE 7/8やFirefox 3/3.5 、Google Chrome 2/3、Opera 9/10、Safari 3/4などを使っている場合も多いかと思いますが、まだまだ大部分のユーザーはIE 6でネット閲覧というのがほとんどです。

　ご承知のとおり、大部分のユーザーに対するコンテンツを作っていかないといけないWebデザイナは、IE 6で表示がズレないようにHTMLやCSSのコーディングしていくのが仕事です。しかしIE 6の場合は、仕様通りの正しいコーディングを行っているにもかかわらずレイアウトがズレてしまうことがあります。

　これらの問題を解決するために、CSSハックやフィルタという、IE 6の表示ずれを修正していくテクニックが使われます。CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS／スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。

　今回は、実際のコードを例に挙げ、下記の9つのテクニックを紹介します。仕事でバリバリCSSハックを使っている上級者も、これからCSSハックを使っていきたいと思っている初心者の方も、いま一度チェックしてみてください。

  1. 透過PNGを表示させる方法
  2. min-width、max-widthを使いたい
  3. min-heightを対応させる方法
  4. heightを100％にする方法
  5. フロート時の2倍マージンを通常に戻す方法
  6. リストの縦並びメニュー
  7. リサイズ時にずれる
  8. フロート時にテキストが3pxずれてしまっていた場合
  9. 外側の要素にoverflow:auto;を指定していた場合

【1】透過PNGを表示させる方法

　IE 6では、透過PNGに対応していません。IE 6でもほかのWebブラウザと同じようにこれを表示するには、「AlphaImageLoader」フィルタというIEの独自拡張や「インポータントハック（!important Hack）」を利用します。

　そのほかのWebブラウザは透過PNGが読み込まれますが、IE 6はインポータントハックなどによりbackgroundが消され、透過PNGが表示できます。

■ 構文

p {
    backgroud:url(sample.png) no-repeat !important;
    background:none; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoder(src="sample.png");
}

■ コーディングサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>透過PNGを表示させる方法</title>
 
  <style type="text/css">
 
    p {
        height:100px;
        background:url(sample.png) no-repeat !important;
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sample.png");
    }
 
  </style>
</head>
<body>
  <p>PNG画像</p>
</body>
</html>

【2】min-width、max-widthを使いたい

　IE 6では、独自の「expression」メソッドを使用することによって、「min-widht」「max-width」を実装できます。

　まず、そのほかのWebブラウザ用に「min-width」「max-width」の指定を記述します。次に「expressionメソッド」を使い、先に指定した「min-width」「max-width」と同じ挙動になるように指定を記述していきます。

■ 構文

p{
    min-width:300px;
    max-width:600px;
    width:expression(document.body.clientWidth < 300? "300px" : document.body.clientWidth > 600? "600px" : "auto");
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>min-width、max-widthを使いたい</title>
 
  <style type="text/css">
 
    p{
        background:#ccc;
        min-width:300px;
        max-width:600px;
        width:expression(document.body.clientWidth < 300? "300px" : document.body.clientWidth > 600? "600px" : "auto");
    }
 
  </style>
</head>
<body>
<p>min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width
min-widthmin-widthmin-widthmin-widthmin-width</p>
</body>
</html>

  1/3

　INDEX
Webブラウザ別CSSハック＆フィルタTips（1）　
IE 6で泣かないための、9つのCSSハック
Page1
最も多く使われているのに……、いや、だからこそ
【1】透過PNGを表示させる方法
【2】min-width、max-widthを使いたい
  Page2
【3】min-heightを対応させる方法
【4】heightを100％にする方法
【5】フロート時の2倍マージンを通常に戻す方法
【6】リストの縦並びメニュー
  Page3
【7】リサイズ時にずれる
【8】フロート時にテキストが3pxずれてしまっていた場合
【9】外側の要素にoverflow:auto;を指定していた場合
IE 6以外で使えるCSSハックも

[an error occurred while processing this directive]
「デザインハック」コーナーへ



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

注目のテーマ

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

本日 月間
＠IT