creatersnest86

IEなどの複数のブラウザチェックができる便利な無料ツールまとめ


こんにちは!

WEBサイトを制作したら必ず行わなければならないのが複数ブラウザのチェックです。
現在、主に使われているブラウザはInternet Explorer、Firefox、Opera、Safari、Google Chromeですが、それぞれの
ブラウザによってCSSやHTMLタグの読み込み方が違ったり、表示崩れや動作不具合が起ったり…とチェックはかかせません。

今回は、そんな複数ブラウザのチェックが無料でできる便利なツールをご紹介します。

 Cloud9

https://c9.io/

ブラウザ上でプログラミングができる、高機能テキストエディタです。
「プレビュー機能」にて複数のブラウザでどのように表示されるのか、画面の状態を確認することができます。

Internet Explorer、Google Chrome、Firefox、Safariなどのブラウザはもちろん、Windows XP、7、8、Mac OSX、Linuxなど複数OSに切り替えることも可能になっています。
さらにiOSやAndroid等のスマホでの確認も可能です。

 

IEテスタ

http://www.my-debugbar.com/wiki/IETester/HomePage

IE5.5~10の動作確認を同時に行うことができるフリーのブラウザです。
すべてバージョンのIEで一括で開くことも出来るので、IEのブラウザチェックを頻繁に行う方にはとても便利です。
まだまだシェアの大きいInternet Explorerのバージョンの動作確認はしっかり行っておきたいですね!

 

Internet Explorer ウェブ開発者ツール

u20150224003https://msdn.microsoft.com/ja-jp/library/ie/gg589512(v=vs.85)

Internet Explorer 8から標準搭載されている機能です。
Internet Explorerで「F12」を押すと表示される開発者ツールの「modern.IE」から、IE5.5~それぞれのバージョンを確認出来ます。
プラグインなどではなく最初から搭載されているものなので、どんな環境でも気軽に使用できるのが良いですね!

 

IE NetRenderer

http://netrenderer.com/index.php

ページ上部のプルダウンリストからチェックしたいIEのバージョン(IE5.5~11)を選択し、フォームにURLを入力するだけURLを指定するだけで簡単にチェックできます。
日本語未対応ですが、操作性がシンプルで使いやすいです。
結果が表示されるスピードが早い点も魅力ですね!

 

BROWSER SHOTS

http://browsershots.org/

ブラウザとバージョンを指定するだけで、スクリーンショットを取得できるWEBサービスです。

Internet Explorer、Goole Chrome、Firefox、Safari、Operaとメジャーブラウザ以外にもNetscapeといった古いブラウザから、LunascapeやSeaMonkeyなどマイナーなブラウザもサポートしています。WindowsやMacの他、LinuxやBSDといったOSの指定ができ、さらにJavaScriptやFlashのオンオフなど、かなり細かい指定ができます。

 

Spoon Browser Sandbox

https://spoon.net/browsers/

ローカル環境で各ブラウザチェックを行うことができます。
Internet Explorer、Google Chrome、Apple Safari、Operaに対応しています。
Xenocodeというアプリケーション仮想化技術により、1つのexeファイルから、各種ブラウザをローカル環境で使えるようになります!

 

Responsive Design Testing

http://mattkersley.com/responsive/

スマートフォンやタブレットでの表示確認も必須ですね。
Responsive Design Testingでは、様々なデバイスの大きさのレスポンシブ具合を最小は240、最大は1024まで一覧表示で確認することができます。
iPhoneやiPadなどのデバイスの大きさに指定して確認する他に、横幅のみの指定でも確認することもできます。

 

The Responsinator

http://www.responsinator.com

様々なデバイスでの表示結果を1ページにまとめて確認することができます。
縦にずらずらっと表示されますのでスクロールして確認してください。
一般的なiPhoneの他に、GalaxyやGalaxy tab、Kindleなどの細かいデバイスのバージョンが用意されている点が便利ですね!

 

まとめ

いかがでしたか?
なるべくチェックは効率的に短時間で済ませ、制作に時間を使いたいものですよね。
そのためにも、様々な便利なブラウザチェックツールの中から、自分の確認方法に合った使いやすいものをぜひ見つけてくださいね!

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleCSS3を使うときのIE対策法まとめ