実践Web Standards Designのススメ
第2回 ブラウザ毎のサイトチェック環境を構築しよう
『実践Web Standards Design』では,モダンブラウザでの表示を前提とした制作方法を提示し,必要に応じてレガシーなブラウザへの対処方法を解説しています。
しかし,書籍の紙面では実際にブラウザでの表示をチェックする方法について触れていませんので,今回の記事で紹介しましょう。
クロスブラウザテスト
『実践Web Standards Design』で取り上げた制作方法やサンプルは,基本的に執筆当時の最新のブラウザでのチェックを行っています。
ひとくちにモダンブラウザと言っても,ブラウザごとに表示が異なることが多くなり得る「第7章XHTML&CSS Tips」や「Appendix2.DOCTYPEスイッチの一覧表」,「Appendix4.CSS3で新たに定義されるセレクタ」では最新のブラウザだけでなく,1世代あるいは2世代前のブラウザまで含めたチェックを行いました。
実際のサイト制作でも,クロスブラウザテストによって,各ブラウザでのサイト表示チェックを行う必要があります。どのブラウザまでをターゲットに見据え,そしてテストに含めるべきという絶対的な指針はありませんので,想定する閲覧者の性質によってテストに含めるブラウザを決めるようにしましょう。
例えば,官公庁や自治体など,「一人でも多くの人に情報を提供する必要がある」サイトでは古いバージョンのブラウザはもちろん,音声ブラウザや携帯端末なども考慮する必要がありますし,例えばPCユーザ向けのアンケートを行うページのように「一定の範囲のユーザに情報を提供できれば良い」という場合は最新のブラウザと,IE 6およびIE 7まででかまわないかもしれません。
なお,どのブラウザまでをターゲットに見据えるかは,言うまでもありませんが企画段階で決めておく必要があります。『実践Web Standards Design』の場合はPC向けのサイトを制作するという前提で解説していますので,今回の記事でもPCのブラウザを前提とします。
制作段階では
さて,チェックを行う前に,チェックを行うサイトが完成していないとどうしようもありません。 企画段階でターゲットブラウザを決定していることと思いますが,制作段階での作業途中の確認はターゲットブラウザに関係なく,最新のブラウザを用いるようにしましょう。 また,最新であるだけでなく,CSS 2.1への準拠度が高いブラウザの方がよりベターです。The Second Acid Test(→実践Web Standards Design P.008)に合格しているブラウザを用いるようにしましょう。
最新のブラウザを用いる理由は,ブラウザ固有のバグを発生させるリスクをできる限り回避するためですCSS 2.1の解釈にバグを含むブラウザで制作を進めてしまうと,本来は正しい表示になるはずの記述でも記述ミスと錯誤してしまう可能性があり,無用な工数を増加させてしまいます。
最新のブラウザでのチェックはそう難しくないでしょう。 Internet Explorer(以下,IE),Firefox,Opera,Safari,Chromeなど,ほとんどのブラウザの最新版はThe Second Acid Testに合格しています。 では,最新版以外のブラウザでのチェックを行うにはどうすればいいか,それを次項から解説していきます。
なお,これらの方法だけが全てではありません。たとえば,テスト専用のマシンを別途設けたり,あるいは同じブラウザでも画面の解像度などを変更してみたりするなど,テスト方法は多岐に渡ることになります。
Internet Explorerでの表示チェック
IEの場合は,通常のインストールでは異なるバージョンを共存させることはできません。たとえば,最新版のチェックのためにIE 8 Beta2をインストールしている場合は,それをアンインストールしないとIE 7やIE 6を起動できません。
そこで,IEの場合はmultiple versions of IEやIETesterなどのツールを導入することで以前のバージョンでのチェックを行うことができます。
ただし,multiple versions of IEはIE 6までを対象としています。 また,IETesterでテスト表示したら意図しない表示になっていたものの,本来のIE 8 Beta 2でテスト表示したら正常な表示だった,というケースもあるため,テストの精度はあまり期待しないほうが良いでしょう。
IETester 0.2.3ではIE 5.5,IE 6,IE 7,IE 8 Beta 2を比較できます。
実践Web Standards Designのススメ
- 第6回 CSS3のセレクタを使用してみよう
- 第5回 横並びメニューの区切り線をCSSで表現しよう
- 第4回 実践 floatプロパティの学習法
- 第3回 floatプロパティを学習する上での3つのポイント
- 第2回 ブラウザ毎のサイトチェック環境を構築しよう
- 第1回 ガイドブックの選び方
-
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
Web標準(Web Standards)に準拠したWebサイトを制作するための基礎知識と,実践的なレイアウト手法を徹底的に解説した,Web標準ガイドブック。新しい仕様やブラウザに...


