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の開発者ツールを使えば簡単に全てのバージョンのデザインを確認する事が出来るのでかなり効率が良くなりました。

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

この一言につきますね笑

広告

関連記事

FC2ショッピングカートの商品登録方法とデザイン変更

FC2ショッピングカートの商品登録方法とデザインの変更方法をご紹介いたします。 はじめに F

記事を読む

AddQuicktagで投稿エディタに良く使うものを入れる方法

ワードプレスでは投稿エディタ色々とカスタマイズできますが、AddQuicktagと言うプラグインを使

記事を読む

パソコンでスマホ用デザインを確認する方法

パソコンからでもスマホ用のレスポンシブデザインやスマホ用デザインを確認する方法があります はじ

記事を読む

画像を簡単に軽く出来るサイト

画像を軽くさせるために縮小したり解像度を低くするのは時代遅れです。 はじめに 大きなjpg画像を

記事を読む

カスタムフィールドで画像を出力する時のヒント【ワードプレス】

ワードプレスを利用中の方で、カスタムフィールドを使い出した人が必ず困る画像の便利な出力方法をご紹介い

記事を読む

カスタム投稿タイプを簡単に作れるワードプレスプラグイン

ブログ記事以外に新着情報と言うのが出したいと言う方の為のカスタム投稿が簡単に作れるプラグインです。

記事を読む

gmailからサクラのサーバー経由でメールが送れない

サクラ、Mail Delivery SubsystemとDelivery Status Notifi

記事を読む

ワードプレスのカスタム投稿タイプにページ送りを導入する方法

表示件数が多くなりすぎるとページ送りを導入した方がデザイン的にも見やすくなります。 はじめに ス

記事を読む

特定のユーザーのみ反映するカスタマイズ方法

ワードプレスでは管理画面の情報をいじると全てのユーザーが影響を受けてしまいますがカスタマイズする事で

記事を読む

amazonアフィリエイトの登録方法

もし、自分のお勧めしたい何かがあった時に非常にうれしいツールの一つがこのamazonアフィリエイトで

記事を読む

広告

Message

広告

現在の総記事数: 274件

gmailの裏技発見したったったwww

gmailの裏技発見したったったwww 登録したサイ

windows10でone driveを無効にする方法

こゆ意図せずに出てこられるのは非常に腹立たしい はじめに on

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

WEBフォントを使って好きなフォントをWEB上に公開しよう

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた! WEBフォントでttfはあ

ツイッターの最初に固定した内容を表示させる方法

ツイッターの初めに固定されたツイートと言う内容があると思いますが、これ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑