新機能と標準採用が挙動やビューに変更を強いる

日経コミュニケーション

2007.07.19

　IE7を利用するとき，Webアプリケーション自体は問題なく動くものの，表示しているページが崩れたり，設計上意図しない動作をするものがある。こうした問題への対策が必要なのは主に公開Webサーバーだろう。もちろん社内のWebサーバーでも，業務に支障が出るようであれば対策は不可欠だ。

IE6とスタイルの解釈で違い

　レイアウトや動作にずれが生じる主な原因は二つある。一つは，IE6とIE7でCSSの解釈の仕方が違っていること。もう一つはIE7から入った新機能によるものだ。

　前者は同じCSSに対してIE6以前とIE7では位置指定の解釈が異なるというものだ。CSSではタグにスタイルを関連付けておくことで図や文章の周りに枠を付けられる。この際，IE6は周囲のタグを関連付けて解釈するのに対し，IE7はそれぞれを独立のものとして解釈する（図1）。

図1●IE6とIE7におけるCSSの解釈の違い
E6ではタグが入れ子になっている場合，スタイルも入れ子として解釈してしまう。

　もう少し具体的に説明しよう。図1では，文章の引用を表すタグ「blockquote」と，文章や図を一まとまりのものとして扱うように指定する「div」タグを使っている。タグの効果範囲は，＜div＞～＜/div＞ように指定する。図1の例を簡略化すると＜div＞＜blockquote＞～＜/blockquote＞＜/div＞ように，2種類のタグが入れ子構造になっている。そして，それぞれに縦横幅を与えて周囲に枠を描かせようとしている。

　このCSSを読み込むと，IE6はdivタグとblock quoteタグの入れ子関係を考慮し，divタグに指定した枠の中に，blockquoteタグの枠が描かれる。これに対してIE7では，タグの入れ子構造は考慮せず別々に描く。W3Cの標準に沿えばIE7が正しい解釈である。

　CSSの仕様変更の根本的な解決策は，CSSをIE7でも問題なく動くように書き直すことである。ただ，緊急避難的な対策もある。IE7をIE6の互換モードで動作させる方法である。

　IE7固有のモード（標準準拠モード）で使うか，IE6互換モードで使うかは，Web開発者側で制御できる。具体的にはブラウザに送信するHTMLファイルの先頭1行目に＜!DOCTYPE＞を記述する（図2）。

図2●＜!DOCTYPE＞記述方法
HTMLファイルの1行目に書いておくことで，IE7にIE6互換モードで解釈させるか，IE7固有のモードで解釈させるかを選択できる。

　一つのファイルにIE6用とIE7用の両方のCSSを記述しておいて，ブラウザ側で選択させる方法もある。IE6以前のブラウザだけに適用したいCSSやHTMLは，「＜!-[if lt IE 7]＞～＜![endif]-＞」で囲った部分に書いておく。IE7だけに適用したいものは，「＜!-[if IE 7]＞～＜![endif]-＞」の中に記述しておく。

拡大・縮小でレイアウトがずれる

　最後にIE7の新機能を使うことで起こる問題を紹介しておこう。

　新機能では，ページの拡大・縮小とタブ・ブラウジングが問題になることがある。VistaとXPでのフォントの違いによる影響もある。実際には，これらの問題点はエンドユーザーのリテラシ次第で気にする必要はなくなる。しかし，すべてのユーザーがIE7の使い方を心得ているとは限らない。Webページの改修を実施する上で，ユーザーの問い合わせに答えるなどサポートまでを視野に入れるなら，IE7の新機能によって発生する問題点について知っておいた方が良いだろう。

　まず，ページの拡大・縮小機能で起こる可能性があるのが，Webページのレイアウト崩れだ。通常状態（100％）で使っているときには問題ないが，ページを拡大したり，縮小した場合にレイアウト崩れを起こすことがある。

　例えば，文字と画像が重なるケース。Webページの上や下に置く「会社情報｜セキュリティ・ポリシー｜お問い合わせ｜サイトマップ」のようなメニューで頻発する。文字と「｜」が重なって表示されて文字を読みづらくなる。

　画像ずれの問題が発生する原因はケース・バイ・ケースだが，CSSを使って画像の位置を指定している場合に出やすい傾向はあるようだ。ソニー銀行の場合，「テキストをdivタグでくくって，画像とテキストの領域を明確化することで回避できた」（営業企画部の金子豊マネージャー）という。

　Flashコンテンツでも問題が生じるケースがある。拡大・縮小をしたとき，Flashの表示領域の大きさは変わるが，その領域内の画像の大きさは変わらない。このため，縮小した場合には画像の端が途切れて表示され，拡大した場合には画像の大きさを超えた部分が空白として表示される（図3）。こうした問題はFlashのコンテンツ自体を固定幅で作っている場合に発生する。Flashコンテンツを改良し，幅を可変にすれば，問題は回避できる。

図3●拡大/縮小機能による画面崩れの問題
米アドビシステムズのFlashで表示するコンテンツが崩れることがある。
[画像のクリックで拡大表示]

タブかウインドウかを制御できない

　タブ・ブラウジングで問題となるのは想定とは異なる表示だ。IE6で新しいページを開く際には別ウインドウを立ち上げるしかなかった。ところがIE7では，新しいWebページをタブで開くケースと別ウインドウで開くケースがある。

　IE7の初期設定では，新たなWebページを開く場合はIE6同様にすべて新しいウインドウで表示するようになっている。しかし，エンドユーザーがすべてタブとして表示するように設定を変えることは可能だ。

　ユーザー名/パスワードを入れて「OK」を押すようなログオン画面は，タブとして開かれることで想定していたデザインとは違う形で表示されてしまう。こうしたユーザー・インタフェースの変化がユーザーの混乱を招き，サポートを求められる可能性がある。

　「別ウインドウとタブどちらで開かれても，ページが崩れたり，ユーザーが混乱しないようなデザインにしておく」（富士通パーソナルビジネス本部PC事業部インテグレーション技術部の坂巻健士プロジェクト部長）方針で臨むしかない。同時に，サポート要員の教育も必要だ。

　フォントの問題は，Windows Vistaに新しく入ったフォント「メイリオ」によってレイアウトがずれてしまうというものだ。

　メイリオは文字がクッキリと表示されるため，ユーザーが好んで使うが，標準のMS Pゴシックよりも文字幅が広い。1行に入るようにレイアウトしたにもかかわらず，1文字だけ下に送られ2行になるといったことが起こる（図4）。富士通では「スタイルシートでフォントをMS Pゴシックに固定することで解決した」（坂巻プロジェクト部長）という。