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

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

クロスブラウザを目指す

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

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

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

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

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

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

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

他にも表示確認を行ってくれるサイトは複数あるので、探してみると良いだろう。