ブラウザ毎の見栄え調整に役立つアプリ

自社サイトの更新作業を外注せずに社内で行っている方はたくさんいらっしゃると思います。
制作会社ならいざ知らず、通常社内にWindowsとMacがあって、それぞれにさまざまなブラウザがインストールされている、といった環境はあまりないのではないでしょうか。

普段使っているブラウザでいい具合に表示されていても、他のブラウザで見ると中途半端にずれてしまっているようなことはままあります。
業者さんに作ってもらったページでも、自分のパソコン以外でちゃんと同じように見える保証はありません。

BrowserLabはそんな不安を解消してくれる便利なツールです。

BrowserLab

Adobe BrowserLab

簡単なユーザ登録をすれば、誰でもすぐに使用できます。
使い方はログイン後の画面でチェックしたいページのURLを打ち込むだけ。
すると該当するページがブラウザ毎のスクリーンショットで表示されるようになります。

チェックできるブラウザは以下。

Firefox 2.0 - Windows XP
Firefox 2.0 - Mac OS X
Firefox 3.0 - Windows XP
Firefox 3.0 - Mac OS X
Internet Explorer 6.0 - Windows XP
Internet Explorer 7.0 - Windows XP
Safari 3.0 - Mac OS X

残念ながら現状Vistaはチェック対象になっていません。
しかしMacのブラウザや、Internet Explorerの6と7を同一パソコンの画面上で比較できるのはとてもありがたいと思います。
「Onion Skin View」の機能を使えば、スクリーンショットを半透明の状態で重ねて余白などの細かな違いをチェックすることもできます。
ページのスクリーンショットをそれぞれのブラウザ分取り込むのに少々時間がかかるので、先に「Browser Sets」でチェックしたいブラウザを限定しておいたほうがいいようです。

ブラウザチェックが済んだら、後は見栄えの調整です。
下記のようなサイトにブラウザ毎で見栄えを振り分ける方法が記載されています。

HTML CSS タグ辞書

CSSハック一覧:HTML│CSSタグ辞書

慣れないうちは面倒だと思いますが、やっていくうちにだんだんポイントがつかめてくると思いますので、めげずに習得していきましょう。

ADRED 2009年08月12日 Webアプリ

前の記事:商用利用可能な画像素材配布サイト
次の記事:PDFmyURLでページのPDFリンクを作成

Comments are closed.