iscle [イズクル] - あなたの生活に役立つネタを!

ホームページの表示を色々なブラウザで確認する方法

竹中文人
執筆者:
[最終更新日]2016/07/04
[カテゴリ]Web・IT

あなたのホームページは“他の人が見ても”問題なく表示されていますか?

自分が見て問題なく表示されていても、他人も同じように表示されているとは限りません。実は表示が崩れていて無残な姿だったということは珍しくないのです。

なぜ自分と他の人で表示が変わるのかと言うと、まず考えられるのがブラウザの違いです。ブラウザとは、Internet Explorer(以下「IE」)やGoogle Chrome、Safari、firefoxなどで、実に多くの種類があります。Windowsの場合、初めから入っているのはIE(Win10以降はEdge)ですね。最近はスマートフォンでも様々なブラウザがあります。

ブラウザの種類によって、またブラウザのバージョンによってもホームページの表示には違いがあります。その為、Google Chromeでは問題なく見れていたのにIEではデザインが崩れてしまっているということがよくあります。

ブラウザの種類で表示が違う

仕事でホームページを作っているという方でなければ、自分が使っているブラウザ&バージョンで問題なく表示されていれば、他のブラウザやバージョンで確認するという方は少ないでしょう。

もし表示が崩れていることでユーザーを取りこぼしてしまう可能性もあるので、本当に問題なく表示されているかどうかは確認しておいた方がよいでしょう。

とは言っても、様々なブラウザとバージョンを自分のパソコンにインストールして確認するというのは大変です。そこで紹介したいのが、確認したいサイトのURLを入れるだけで、様々なブラウザとバージョンでの表示を無料で確認できるサービス「BROWSER SHOTS」です。
http://browsershots.org/

BROWSER SHOTS の使い方

使い方はとても簡単です!確認したいサイトのURLを記入し、ブラウザの種類にチェックを入れるだけです。
browsershot

初期状態だとあまりにたくさんチェックが入っているので、不要なものは時間がかかるので外しておきましょう。[Submit]をクリックすると、チェックを入れたブラウザでの表示をスクリーンショットとして見ることができます。

スクリーンショットの作成には時間がかかりますので、少し時間を置いてからページの更新をしてみましょう。するとスクリーンショットが表示されます。
Screenshot_1

全てのブラウザできれいに表示される必要はありません。もし利用者が多いブラウザで意図した表示がされていない場合は、HTMLやCSS等を修正してみて下さい。また最近はスマートフォンでの表示確認も重要とされています。スマートフォンでどのように表示されるかは下記ページをご覧ください。