HTML作成者の対応
Windows Vistaの標準ブラウザとなる Internet Explorer 7 (以下IE7) 。その急速な普及に伴ったHTML作成者の対策を簡単にまとめました。
- Internet Explorer デベロッパーセンターにも同様の情報があります
http://www.microsoft.com/japan/msdn/ie/ - IE7互換性チェックリスト
http://www.microsoft.com/japan/msdn/ie/ie7/compatichecklist.aspx
対策が必要な点など
UserAgent文字列の確認
Webサイトのアクセスログを見たとき、ユーザーがWindows Vista＋IE7で観覧したときに残るユーザーエージェント文字列は以下の通りです。
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0) Windows Vista ＋ IE7
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Windows XP ＋IE6
Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Windows 2000 ＋ IE5.5
自分がWebサイトにアクセスした場合、どのようなユーザーエージェント文字列がログに記憶されるかを確認するにはアドレスバーに以下を入力し実行します。
javascript:alert(navigator.userAgent)
メイリオを適応させる
右のページが「メイリオ」を適応させたもの。
Vistaで採用された新しい日本語フォント「メイリオ」は、IE7で観覧するWebサイトにも適応されます。自分のWebサイトを「メイリオ」に対応させるには、body要素のフォントセットに追加するだけです。以下一例。
body { font-family: メイリオ, ＭＳ Ｐゴシック, ヒラギノ角ゴ Pro W3, Osaka; }
ただこれらの設定はVista＋IE7をデフォルトの状態で使っている時のみ有効です。IE7ではユーザー側の設定で自由にフォントセットやサイズを指定することができます。そのためメイリオでもレイアウトが崩れないWebサイト作りを目指すのが最善の道だと思います。
互換モードの注意点
下記ソースの用に、HTML文書の先頭にXML宣言を付けるとIE6では互換モードでレンダリングが行われましたが、IE7では標準モードでの描画になります。
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
このバグが修正されたのは嬉しいことですが問題があります。元々IE6の互換モードを想定しCSSハックを行っていたサイトではレイアウトが崩れるといった不具合が発生することです。
これを解消するにはXML宣言を先頭から消し互換モードで動作させるか、IE6用とIE7用の二つの専用CSSを用意する方法が考えられます。以下はIE7用のCSSを読み込ませる一例。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
変更されたCSSレンダリング
CSSの解釈が標準に近づいたため、これまで行われてきたCSSハック(ブラウザのバクを利用して正しく表示させる裏技、文法的には間違っている)が本当に間違いになる部分があります。
代表的なものがOverflowの動作変更で、既定値のvisibleを設定するとボックスからはみ出たコンテンツは、はみ出たままになります。IE6でははみ出た部分までボックスが拡張していました。width: height: でピクセル指定している場合には修正が必要です。ただIE7を互換モードで動作させることにより、IE6同様の表示が可能です。
他の変更点
- 属性セレクタと子セレクタ (A > B) の記述に対応
- 隣接セレクタ (A + B) の記述に対応
- 「:hover」をリンク要素以外にも適応可能
- 「:first-child」に対応
要素内で最初に出現する子の要素を指定できるようになった
- http://www.positioniseverything.net/
IE7の問題点やCSSに関した情報があるサイト(英語)
機械翻訳でも有益な情報が得られます
ようやく対応したPNGのアルファチャネル
PNGのアルファチャネルとは半透明処理がされたPNG画像のことで、画像を二重に重ねてデザインできるようになりました。例えば、背景画像を指定した<div class="sample"></div>の中に半透明PNGを配置すると以下のようになります。
IE6でも表示テストをしたい
Windows XPにIE7をインストールした場合IE6に戻すのは簡単です。「コントロールパネル」→「プログラムの追加と削除」からIE7をアンインストールし、再びIE6を入れるだけです。
OSエミュレータを使う
Windows Vistaの場合はその方法はとれません。標準ブラウザとなっているため削除はできず、また古いバージョンもインストールすることができません。しかし、Vista上で古いバージョンのOSを動かすことで、IE6以前のブラウザチェックが可能です。
「Virtual PC」単体では動きません。2000や98の正規インストールディスクが必要になります。
Vista Ultimateの特典(おまけ)として提供される「Virtual PC」ですが、非常に使い勝手がよく、軽く、完成度はあまりにも高いです。マイクロソフトが提供する点において最強のWindowsエミュレータと言えます。