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

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

この一言につきますね笑

広告

関連記事

新しいユーザー権限が作れるUser Role Editor

ワードプレスで新しい権限を作れるって知っていましたか? はじめに 新しいサイトを作成している

記事を読む

ムーバブルタイプからワードプレスに引越しする方法

ムーバブルタイプからワードプレスに引越しをした時のメモです。 はじめに 今回はムーバブルタイプか

記事を読む

ECキューブで販売する為の最低限の設定その2

その1が終わったら次のこの2を見て下さいね。 はじめに とりあえず、デフォルトで表示して

記事を読む

売れる商品画像は影が必須

ドロップシッピングやショッピングサイトを運営している方に一度やって頂きたい画像の作り方をご紹介いたし

記事を読む

Contact Form 7の送信元をメールアドレスにする方法【さくら】

コンタクトフォーム7からのメールのメールアドレスと送信元が違うケースって結構ありますよね。 はじめ

記事を読む

ECキューブに商品登録する時はCSVを使おう

ECキューブで最低限の設定が終わったら次は商品の登録です。 はじめに ECキューブは管理

記事を読む

URLを入力するだけでfacebookのようなリンクを表示させる方法

リンクを入力するだけでアイキャッチや文章を表示させる方法をご紹介いたします。 はじめに 自分の過

記事を読む

記事の投稿方法【ワードプレス】

ワードプレスをインストールし、ブログを書く事が出来るになりました。ただ、通常のブログと違いますので記

記事を読む

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

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

記事を読む

ワードプレス全体にパスワードをかけるPassword Protected

特定の人だけにホームページやブログを見せたいなぁっと考えている方、ステキなプラグインを発見しました。

記事を読む

広告

Message

広告

現在の総記事数: 292件

GoogleのWEBフォントを導入してみた

過去にもwebフォントに触れている記事は多いですが、googleさんの

yahooリスティング広告のオプション登録は必須

広告の下に出てくるリンクは絶対に設定しておきましょう はじめ

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります はじめに

Googleアナリティクス一覧のセッションなどのデータが表示されなくなった

久々にGoogleアナリティクスを見たらデータが表示されなくなっていた

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

→もっと見る


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