IEテスターよりも便利な開発者ツール

公開日: : 最終更新日:2015/07/11 副業で稼ぐ仕組みの作り方

IEテスター重すぎてテストに環境としては悪すぎる・・・そんな人の為に開発者ツールをご紹介させて頂きます。

はじめに

過去にcssのハックと確認方法と言う記事でIEテスターと言う全てのバージョンでチェックできる物を紹介しましたが、とにかく重すぎるなと自分でも感じていました。

そんな時に見つけたのがIEに標準装備の機能を使って全てのバージョンでチェックする方法です。

注意事項

現在のIEのバージョンによってこの機能が使えない場合があります。

IEテスターだと

ietest

IEテスターを使っている人だとわかると思いますが

  • まずとにかく立ち上がりがとにかく重い
  • ファイルサイズが大きい
  • すぐに落ちる

こういった事ってよくありませんか?

こんなに使うのにストレスが溜まるのに他に使えるツールがないからIEテスターを使っている・・・

そんな皆さんに朗報です

もっと簡単にIEの全てのバージョンをチェックする方法がございます。

IE開発者ツール

IE開発者ツールと言うのは、IEにデフォルトでついている機能なので

  • インストールする必要なし
  • 簡単に全てのバージョンチェックをする事が出来る

と言うのがポイントです。

使い方を紹介します

IE開発者ツールを使いたい場合は

ietest1

まず、IEを立ち上げデザインをチェックしたいページに移動します

ietest2

キーボードのF12を押します

ietest3

Edgeをクリックして任意のバージョンをクリックする

たったこれだけで簡単にIEのバージョンによるデザインチェックをする事が出来ます。

チェックしてみたよ

念のため、本当にブラウザチェックをして動くかどうかのチェックをしてみました。

IE5のブラウザチェック

ietest4

IE7のブラウザチェック

ietest5

IE8のブラウザチェック

ietest6

IE9のブラウザチェック

ietest7

IE10のブラウザチェック

ietest8

すべて色通りになっていました。

IEの開発者用のバージョンチェックを作ってみたので皆さんも一度チェックをしてみてください。

IEのブラウザチェック

問題点

cssのハックが動かない

こちらの生地の最初にcssのハックと確認方法と言うのを紹介いたしましたが、こちらではcssのハックをつかってIEのバージョンによって崩れた部分などの調整をするやり方を紹介しましたが、このIE開発者ツールの場合はcssのハックでは動かないようでした。

例えばIE7でチェックした場合

ietest9

本来ならば赤色が表示されていないといけないのですが、紫色が表示されています。

これだと結局のところcssだけでは確認が出来ないのでhtmlに各IEのバージョン用タグを埋め込まないといけませんね。

フリーズする・・・だと・・・

IEテスターだとフリーズしたり動作が終了してしまうなんて事があるからと言う理由でIE開発者ツールをつかったとしても、情報量が多ければどうしてもフリーズしてしまいます。

そんな時の対応方法は

ローカルでチェックする

事です。

デザインチェックをするだけであればローカルで動かした方がサクサク動くのでチェックしやすいですよ。

このようにすんごく使いやすい!と言うわけではありませんがIEテスターに比べると圧倒的にストレスは減ると思います笑

さいごに

IEのバージョンテストは本当に面倒くさい

私は稼げる副業の一つでホームページ制作をしておりますが、正直一番やっかいなのがIEです。

私の場合は5.5以下は全て対応なしにしているので大きな影響はありませんが、全てのバージョンに対応している人であれば正直な話結構大変な思いをしているのではないでしょうか?

過去に自社サイトを作成する際にIEの5.5にも対応させようとIEテスターを使って確認作業をしていましたが、

立ち上がりが遅い上に情報量が多い場合は更新するたびに時間がかかりすぎていたので正直うんざりしていました。

そんな時に見つけたIEの開発者ツールを使えば簡単に全てのバージョンのデザインを確認する事が出来るのでかなり効率が良くなりました。

もっと早く出してほしかったなぁ。

この一言につきますね笑

関連記事

no image

WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう はじめに 最近クライアン

記事を読む

WordPressでCSV登録が出来るReally Simple CSV Importer

とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいで

記事を読む

Custom Field Suiteの表示と分岐

Custom Field Suiteの導入の仕方がわかったが、分岐の仕方がわからない人のために私が使

記事を読む

ECCUBE3をさくらにインストールしたよ

ECCUBE3の情報がまだまだ圧倒的に少なかったので、自分がさくらサーバーにインストール時に苦労した

記事を読む

ワードプレスでステップメールを無料で使えるプラグイン

ステップメールが無料で使えるワードプレスのプラグインをご紹介させて頂きます。 はじめに

記事を読む

ワードプレスの記事やカテゴリなどの各IDを調べる方法

ワードプレスには記事やカテゴリ、タグなどそれぞれIDがございます。 はじめに プラグインの設定を

記事を読む

ワードプレスに任意の画像サイズを追加する方法

2種類のサムネイル画像を表示させたいなぁって時に使えた技です。 はじめに ワードプレスだと元々サ

記事を読む

コンタクトフォーム7からの迷惑メールを防ぐ方法

コンタクトフォーム7を入れたけど、今度はここから迷惑メールが来ることが増えます。迷惑メールをブロック

記事を読む

カスタムフィールドをand条件で表示させる

AとBの条件に当てはまる場合に表示させると言う分岐?のやり方がわかったのでご紹介いたします。 はじ

記事を読む

Googleアドセンスを申し込む前に

Googleアドセンスを申し込む際に色々とやらなければならない事がございます。今回はやらなければなら

記事を読む

Message

現在の総記事数: 310件

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

Gooogleの著作権侵害による削除依頼をしてみた

ある日うちが取り扱いをしている商品が詐欺サイトに掲載されていたので早速

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

→もっと見る

PAGE TOP ↑