CSSで作ったサイトを各ブラウザーで確認する

CSSを使ってWebサイトを作った後や、CSSの変更を行った後などブラウザー上でちゃんと表示されるかは気になるところ。

特に自分よりも古いバージョンでしっかり表示されているかどうかは、自分ではなかなか確認できず、じつは表示されずにずっと放置されていたという状態になりかねない。

そんな時、この『browsershots』なら、各OS各ブラウザーごとの表示を一覧で確認できます。使い方を紹介します。

 

『browsershotsの使い方』

わりと直感的に操作できるのですが、海外のサイトなので多少とっつきにくいところがありますので、画像入りで簡単に使い方を説明します。

 

【URLの入力＆各ブラウザーの選択】

まずはトップ画面でチェックしたい各OSの各ブラウザーを選択します。

日本ではあまりメジャーでないでブラウザーも多く含まれているので、主要なブラウザー（MSIEやFirefoxなど）以外はチェックを外していきます。
（ここで選択が多いと次のページでの動作に時間がかかるようになってしまいます）

 

ブラウザーを選択したら、上のボックスに調べたいサイトのURLを入力して、右の“Submit"ボタンをクリックします。


 

 

【各ブラウザーのサムネイルが表示】

選択した各ブラウザーのサムネイルが生成されます。
（サムネイルができるまで少し時間がかかります）

このサムネイルである程度調べたサイトがどのように（正常に）表示されているかどうかが確認できます。

 

 

 

【拡大して確認】

個々のサムネイルをクリックすると、それぞれの拡大図が表示されます。ここで細かい部分もちゃんと表示されているかを確認することができます。

 

 

以上、簡単ですが『browsershots』を使った、各ブラウザーチェックの解説でした。