第38回 IE6よさらば【その2】テーブルレイアウトを卒業しよう

IE6よさらば【その2】

前回に続き、IE6をサポートしないWeb制作の可能性をみていきたいと思います。

前回はIE6では使えないセレクタをご紹介しました。

透過pngの使用

IE6はアルファチャンネルで透過されたpngをサポートしていません。

そのため、背景を透過して表示するために、IEの独自拡張を使う、JavaScriptのライブラリを使う、など色々対応策があります。

現実問題、使わざるをえないケースは多いかもしれませんが、IE6を考慮しなければわざわざそんなことをする必要はありません。透過pngを使うことが出来れば、デザインの幅は非常に大きく広がります。

IE6は透過pngを正しく表示できない

背景に指定した透過png

<div id="box"></div>
#box {
width: 160px;
height: 40px;
background: #999 url(transparent.png) no-repeat;
border-top: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}

font-sizeのpx指定

一般的に、font-sizeはpxなどで絶対的な数値指定をしない方がよいとされています。

これは、font-sizeが絶対値で指定されていると、ユーザーがブラウザで文字サイズを大きくしても大きさが変わらなくなってしまうため、ユーザビリティ上問題があるからです。しかし、モダンブラウザーは文字サイズの拡大縮小ではなく、ページ全体のズームが採用されているため、font-sizeを絶対値で指定しても、 画像なども含めて純粋にページ全体を拡大縮小することができます。

IE6は文字サイズのみの拡大で、px指定すると文字の大きさが変わらなくなる。

モダンブラウザーはページ全体のズームで拡大縮小ができる

<h1>font-size: px vs em</h1>
<p><img src="dw_cs4.png" alt="sample" width="70" height="74" />
Lorem ipsum dolor sit amet....</p>

属性セレクタの使用

IE6は属性セレクタを実装していません。IE7から使用できる属性セレクタを使えば、「a要素のhref属性が".pdf"で終わっていたら、特定のbackground-imageを表示する」などの汎用的なコーディングが可能になります。

href属性が'.pdf'で終わっていたらアイコンを表示する

<a href="/xxx.pdf">ドキュメントを見る</a>
a[href$=".pdf"] {
padding-right: 18px;
background : url("./file_acrobat.gif") no-repeat right top;
}

このようにIE6を非対象とするだけでデザインの幅、コーディングの汎用性が大きくかわることがわかります。

制作者側のメリットばかりのようですが、IE6は頻繁にセキュリティ面での問題も浮上し、最近の中国からと思われるGoogleへのアタックもIE6の脆弱性がねらわれたとか。ユーザーサイドからみてもIE6を使い続ける理由はないでしょう。

IE6ユーザーの方にはアップデート、乗り替えを強く推奨します。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
自由自在にフォントを使う!
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読