多くのブラウザで表示確認しよう

ブラウザ間での表示差異をなくそう、というお話。

クロスブラウザを目指す

クロスブラウザとは、さまざまなブラウザで、表示差異がなく、正しく表示されることをいいます。

いまだシェアがある IE5 や、Windows と Mac のような OS の違いがあっても、サイトのデザインに崩れがないかをチェックしておきましょう。

ブラウザごとに表示のズレがあるのは、CSS の実装にバグがあるからで、どのブラウザも何かしらのバグを持っています。それらのバグを回避しながらサイトを作っていき、実際にブラウザで確認しましょう。

持っていないブラウザでの表示確認

多くのブラウザで確認するといっても、旧バージョンのブラウザや、Mac を持っていない Windows ユーザーなどは、それらの OS、ブラウザで表示確認ができません。

そこで紹介するのが、Browsershots というサイトです。このサイトは、表示確認したいページの URL を入力し、確認したいブラウザや OS を選択すれば、それらの環境で表示確認をし、画像にして結果を見せてくれます。

新旧ほとんどのブラウザで確認でき、JavaScript や Flash を有効にするか否か、という細かな設定もできます。

なお、1ページごとに画面をキャプチャしたものを繋げているようなので、背景画像を固定している場合は、背景画像の表示が繰り返されているようになるかもしれませんが、それは背景画像が固定表示されている印です。

他にも表示確認を行ってくれるサイトは複数あります。ぜひ探してみてください。