スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

Internet Explorer9で、IE8やIE7の表示を確認する

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第18回目の授業です。

コーディングをしていると、必ずぶつかるIEの壁。
色んなブラウザで表示確認しましょうねと学習したとおり、Internet Explorer(IE)、Chrome、Firefoxあたりの見え方は確認しながらコーディングを進めていることと思います。

IEでもちゃんと見えてるからヨシヨシ大丈夫、と安心するのはまだ早い!
そのIE、バージョンは何ですか?

IEというのは、同じブラウザでもバージョンの違いによってかなり挙動が違うのです。
IE9で正しく表示されていても、8や7ではずるっとずれているかもしれません。

自分のPCにはIE9しかないのに、じゃあどうやって確認したらいいの?
と思いますね。ということで、今日はIEの表示確認に役立つツールを紹介します。
特別なソフトは要りません!

ところで、IE8や7のシェアが実際にはどのくらいか、気になりますよね。
参考までに、このブログのアクセス解析のデータを見てみましょう。

このブログの訪問者さんをブラウザ別にみると、Chromeが一番多くて、次にIEとFirefoxが同数くらいで続いています。
制作関係者さんがやっぱり多いんだろうなという印象です。

そしてIEからのアクセスの中でも、バージョンごとの割合がこちらです。

20130221_05.jpg

ここまで解析してくれるなんて、Google Analytics先生さすがです。

IE9が圧倒的に多くて、8がその半分以下、7は4%弱ですがアクセスがあります。
10も上がってきていますね。
そして未だにIE6でブラウジングしている人がWeb系の記事を読んで何をしようとしているのか、かなり興味をそそられるデータであります。

Web系ブログでこれなので、ペットだとか飲食だとか、生活系テーマのサイトであれば、IE6、7、8の割合ももう少し増えそうな気がします。

では、どのバージョンまで対応するか。
IE6はもういいとして、制作会社でもIE7の表示までは保障するところが多いんじゃないかと思います。

ということで、コーディング初心者の戦いの相手としては手強いIE7ですが、確認だけは簡単にできますので、自分の作ったサイトがどう見えているのか、こわごわ確認してみましょう。。

用意するのは、いつものブラウザIE9です。それだけです。
IEの表示確認には、「IETester」というフリーソフトが有名で、私も使っていました。
でもそれより簡単に、ブラウザの公式ツールでもっと手軽にできるんですね。

前置きが長かったですが、以下手順。

表示確認したいページをIE9で開きます。
サーバに上がっているページはもちろん、ローカルファイルでもOKです。

そして、ウィンドウ右上のツールアイコンから、「F12 開発者ツール」をクリックします。

20130221_01.jpg

ショートカットはその名の通り、[F12]キーです。

別ウィンドウで、このような画面が立ち上がります。

20130221_02.jpg

左側に「ブラウザー モード:IE9」とあるところをクリックすると、下にIE7から9までのバージョンのメニューが出てきます。

20130221_03.jpg

確認したいバージョンを選んでクリックすると、さっき開いていたWebページの表示が切り替わります。
ここでは、IE7での表示を見ています。

20130221_04.jpg

特にCSS3を使っている場合は、IE8でも角丸やシャドウなど全く反映されませんので、必ず見てみてくださいね。

さあ、ご自分のサイトを確認してみてどうでしたか?
あちゃ~…と思った方、まともに表示させられるよう、もう少し頑張ってみましょう!

おまけに。
今回はIE9での使い方を見ましたが、IE8にも同じ機能があります。

IE8の場合は、「ツール」メニューから「開発者ツール」(これもショートカットはF12)でウィンドウを出して、同じく「ブラウザー モード:IE8」というところをクリックして表示切り替えができますよ。

それでは、お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。