emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

IEでFire bug風の開発者ツールをつかったりIE7~10の表示を簡単に確認する方法

IEといえば問題児ブラウザで有名ですが、各バージョンの確認が多少面倒なものです。

chromeみたくバージョン制度廃止してほしいです。自動更新してほしい!

 

いままではIE TesterなるソフトをインストールしてIEの各バージョンを確認していたのですが、すぐクラッシュしたり、重かったりと大変でした。

インストールしたPCによって見え方が違う現象も起こることも。(PCごとのIEの設定を受け継いでるのかな?)

 

IE Testerでは表示の確認までは出来るものの、FireFoxやchromeみたいに開発者ツールで原因を探る事ができないんですね。

 

しかし、いつのまにかIEに開発者ツールが実装されていました!(IE10から?)

 

IEの開発者ツールの起動方法

ショートカットは「F12」キー。chrome、Firefoxと同じです。

 

メニューから開く場合は「Alt」キーをおしてメニューを表示させます。(タブの下にぴょこっと出てきます。)

f:id:emj1025:20131114172320j:plain

「ツール」→「開発者ツール」

 

f:id:emj1025:20131114172401j:plain

これで開きました。おなじみのインターフェイス。

 

使いにくいですが、無いよりましです。

 

 

IE7~10対応のブラウザモード

この機能が一番のポイントです。

 

開発者ツールのメニューに「ブラウザモード」という項目があります。

f:id:emj1025:20131114172435j:plain

IEのバージョンを7~10までモード切り替えをする事が可能。IEにしてはやるじゃないか。

 

これで重いIE Testerとはおさらば!開くブラウザが一つ減りました。

 

今後のIE対応はどうするか

IE6の対応は最近激減しましたが、案件によってはまだIE8とか9とかちらほらあったります。IE9は見た目崩れが少ないのでわりと優秀になったと思います。css3も結構対応しだしましたし。

 

XPがIE8までしかアップグレードできないのでもうしばらくは対応に追われるかと。

 

といっても来春にはXPのサポートが終わるようなので、うちの会社では来春以降はIE8未満は基本対応しないつもりです。

http://www.microsoft.com/ja-jp/windows/lifecycle/xp_eos.aspx

 

これでcss3とか透過pngとか積極的に使えますね。うれしい限りです。

 

 

 http://www.google.com/intl/ja/chrome/browser/

 

emuramemo(c) All Rights Reserved.