アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » 実践Web Standards Designのススメ » 第2回 ブラウザ毎のサイトチェック環境を構築しよう

実践Web Standards Designのススメ

第2回 ブラウザ毎のサイトチェック環境を構築しよう

前回に引き続き,hxxk.jpの望月真琴です。

『実践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 IEIETesterなどのツールを導入することで以前のバージョンでのチェックを行うことができます。

ただし,multiple versions of IEはIE 6までを対象としています。 また,IETesterでテスト表示したら意図しない表示になっていたものの,本来のIE 8 Beta 2でテスト表示したら正常な表示だった,というケースもあるため,テストの精度はあまり期待しないほうが良いでしょう。

図1 IETester

図1 IETester

IETester 0.2.3ではIE 5.5,IE 6,IE 7,IE 8 Beta 2を比較できます。

著者プロフィール

望月真琴(もちづきまこと)

ウェブとの接点がない業界に身を置きながら,趣味でウェブ制作に関する情報を収集。2003年頃からHTML,CSSに興味を持ち,2004年8月に現サイト「hxxk.jp」開設。ウェブに限らず,気になる情報を自分用にまとめあげて記録するようにしている。本書サポートサイト「lh3.jp」の管理も担当。

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス