ブラウザによってサイトのデザインが変わるかテストできるサイト「Browsershots」

2007.10.20 ( Sat )
IEやFirefox、Operaなどブラウザはいろいろありますが、それぞれ微妙に仕様が異なるため、Webページやブログを作成しても、あるブラウザではちゃんと表示できるのに、他のブラウザで見ると表示の仕方やデザインが異なってしまうということはよくあります。

Browsershotsはいろいろなブラウザでそのサイトがどのように表示されるかスクリーンショットを取ってくれるサイトです。
サイト : Browsershots

Browsershots
使い方は「Enter your web address here:」にサイトのURLを入力し、スクリーンショットを取りたいブラウザにチェックを入れて、[Submit]を押せばOKです。
オプションで、スクリーンサイズやJavascriptの有効/無効などを設定することが出来ます。
[Submit]を押してから全てのブラウザのスクリーンショトが取れるまで結構時間がかかるので、とりあえずSubmitしておいて後日「http://browsershots.org/Submitしたサイトのアドレス」にアクセスしてみると良いかと。

ブログのスクリーンショット
とりあえず、このブログのスクリーンショットを取ってみましたが、ブラウザによって大きな違いは無いようです。

ちなみに、ブラウザによって表示が大きく異なる場合は以下をチェックしてみると良いかと思います。

CSS
CSSファイルに記述ミスやブラウザ特有のCSSを記述しているとブラウザによっては表示が大きく異なってしまいます。
とりあえずW3C CSS 検証サービスを利用してエラーを修正してvaild CSSにしてみると良いかと思います。

DOCTYPE宣言XML宣言
前に記事を書きましたが、IE6でXML宣言を記述したサイトを見ると古いバージョンのブラウザに合わせた表示になってしまいます。
このことによって、幅、高さの計算やフォントのサイズ、スタイル定義等が変わり、サイト表示が大きく異なってしまいます。

CSSやDOCTYPE宣言、XML宣言の書き方等については、書くと長くなるので自分で調べてください。
なお、ブラウザによってpaddingやmargin等の計算方法が異なるため、微妙な違いというのは必ずあるので、そこら辺は諦めましょう。


スポンサードリンク


この記事に対するコメント


この記事に対するコメントの投稿












※ スパムコメント対策のため、現在「http」が含まれているコメントを拒否しています。
URLを書く場合は、"h"を抜いて書くなどして下さい。

申し訳ありませんが、いろいろ忙しくなってしまったので、
今後、質問などのコメントに対しての返信はほとんど出来ないと思います。
不明点が場合はGoogle等を利用して自力で解決して頂くか、諦めてください (´・ω・`)

この記事に対するトラックバック

トラックバックURL
http://ub.blog85.fc2.com/tb.php/206-696baac9
この記事にトラックバックする(FC2ブログユーザー)
ブログ内検索
RSS
Google +1 ボタン
リンク
人気記事ランキング
ブログパーツ
アクセスランキング
ブログパーツ
カウンター

カレンダー
«09 | 2017/10 | 11»
1234567
891011121314
15161718192021
22232425262728
293031----
テスト
track word track feed この日記のはてなブックマーク数