IE 6で泣かないための、9つのCSSハック
有限会社タグパンダ喜安 亮介
2009/10/8
Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部）
最も多く使われているのに……、いや、だからこそ
- - PR -
多くの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ハックを使っていきたいと思っている初心者の方も、いま一度チェックしてみてください。
- 透過PNGを表示させる方法
- min-width、max-widthを使いたい
- min-heightを対応させる方法
- heightを100％にする方法
- フロート時の2倍マージンを通常に戻す方法
- リストの縦並びメニュー
- リサイズ時にずれる
- フロート時にテキストが3pxずれてしまっていた場合
- 外側の要素に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ハックも |
||
Webブラウザ別CSSハック＆フィルタTips バックナンバー 連載インデックスへ»
- 第1回 IE 6で泣かないための、9つのCSSハック
- 第2回 IE 6とIE 7のためのCSSハック16選
- 最終回 モダンブラウザでも使えるCSSハック18選
 |
「デザインハック」コーナーへ |
- いまさら聞けないTwitter超入門−＠IT記事も対応なう （2010/2/4）
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない （2010/2/2）
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選！ （2010/1/29）
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity （2010/1/27）
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
 |
|
|
|
|
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは？ 仮想化運用管理のキモは意外なところに！ New！ |
| ◆ | 操作もマニュアルも分かりやすい！ ユーザー視点で開発されたPC管理ツール New！ |
| ◆ | 仮想化すればコストは削減できるか？ 仮想化に必要な「3つの視点」を解説する |
| ◆ | セキュリティを知り尽くす上野氏が登壇！ ＠ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
| ◆ | 世界に通用するストレージの作り方とは？ 製品に込めた思いを富士通の開発者に聞く |
| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫？ 情報漏えいを防ぐ管理手法とインフラは？ |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |
| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ！ Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | ＠IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |
| ◆ | ＠IT「Windows 7」 特設サイトオープン！ 最新情報・移行ノウハウを公開しています |
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。