前回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。
※「F12 開発者ツールって、なんじゃい?」 という方はぜひ、前回の記事をご覧いただければと思います。
今回は、Internet Explorer 9 のコンテンツ表示画面への、さまざまな情報の表示方法について紹介します。
エレメント情報の表示
JavaScript や CSS で Web ページのエレメント を操作する場合、エレメントの id 属性や class 属性を使用します。
こういったエレメントの持つ情報の確認は、一般的に HTML ソースで行いますが、ブラウザーのコンテンツ表示画面に実際に描画されたエレメント上で確認できたほうがイメージが湧きやすい場合があります。
IE9 の F12 開発者ツールの [表示] メニューを使用すると、Web ブラウザーで表示されている Web ページ上に、そのページを構成しているエレメントの ID やクラス名、リンク パスやその他の情報を表示させることができます。
表示の仕方は、[表示] メニュー内の目的にあったメニューを選択していくだけです。
(F12 開発者ツールの[表示]メニューの内容)
(エレメントの ID とクラス名を表示したところ)
[表示] メニュー内の [リンク レポート]を選択すると、ページ内の全てのリンクの一覧を Web ページとして表示します。
(リンク レポートの表示画面)
この機能は、ローカルにある Web ページはもちろんのこと、インターネット上の Web サーバーにある第三者が作成した Web コンテンツの調査にも使用することができます。
画像の情報表示
Web ページで画像を使用する際、体裁を整えるための表示サイズはもちろんのこと、ファイルの大きさや、画像が表示されない場合の振る舞い、代替テキストについても確認が必要な場合があります。
IE9 の F12 開発者ツールの [イメージ] メニューを使用すると、前出のような情報を、Web ブラウザー上の目的のページに重ね合わせて表示し、確認することができます。
(F12 開発者ツールの [イメージ] メニューの内容)
[イメージ レポートを表示する]メニューを選択すると、ページ内で使用されている全ての画像についての詳細なレポートページが表示されます。
(イメージ レポートの表示画面)
レポート機能を使用すると、各々の画像について、設定が意図したとおり適切に行われているか、俯瞰的に確認することができます。
Web ページの検証機能
F12 開発者ツールには、前述した [表示] メニュー内の各メニューのように、エレメントが持っている情報を表示する以外に、ウィンドウサイズを変更しての表示や、ルーラーの表示など、検証に役立つさまざまな表示の機能が用意されています。
これらの機能を使用するには F12 開発者ツールの [ツール] メニューを使用します。
(F12 開発者ツールの[ツール]メニューの内容)
ウィンドウ サイズを変更しての表示の確認
インターネット上の Web ページを閲覧するクライアントは多くの場合不特定多数であり、それらクライアントの画面サイズはある程度のパターンはあるにしろ各々異っています。
そのため、Web ページは異なるウィンドウサイズのクライアントからアクセスされた際も、最低限機能的に支障の出ないように画面を設計する必要があります。
また、最近ではスマートフォンや、タブレットデバイスなど、PC ではなくても十分な Web クライアントの機能を備えたブラウザーを搭載したデバイスが数多くリリースされており、Web コンテンツを閲覧するためのクライアントとして無視できない存在になりつつあります。また、将来的にはそのスクリーン数が PC を越えることはほぼ確実であるため、今後それらを意識した、今よりも多くのスクリーンサイズにに対応した Web ページの作成が今より盛んになってくるでしょう。
このような新しいデバイスが持つ画面サイズは、 PC よりもさらに種類が多いため、Web サイト閲覧の対象として考えるのであれば、PC よりも多くの画面サイズのパターンを使用して表示状況を表示状況を検証しておくことをお薦めします。
F12 開発者ツールのメニュー [ツール] の [サイズ変更] メニューを使用すると、任意のサイズに Internet Explorer 9 のウィンドウサイズを変更し、そのウィンドウサイズでのドキュメントの表示状況を確認することができます。
( [ツール] - [サイズ変更] メニューには、あらかじめいくつかの画面サイズがプリセットされている)
メニュー内にあらかじめいくつかのウィンドウサイズがプリセットされていますが、該当するサイズがない場合は、[カスタム] メニューを使用して自分で定義することができます。
(ウィンドウサイズを指定するためのダイアログボックス)
ルーラーによる計測
Web ページを、厳密なレイアウトで作成しようとすると、ブラウザーに実際に表示されているエレメントや、文字列の長さを確認したい場合があります。
F12 開発者ツールのメニュー [ツール] - [ルーラーを表示する] を使用すると、Web ページを表示しているブラウザーの画面上に直接ルーラー (メモリ線) を描画して長さを確認することができます。
この機能を使用するには、メニュー [ツール] - [ルーラーを表示する] を選択し、[ルーラー] ダイアログボックスを表示した状態で、ブラウザー内の Web ページの任意の位置をドラッグします。
(ルーラーを指定するためのダイアログボックス)
すると、以下のようにルーラーが表示され、ドラッグした間の長さを確認することができます。
( Web ページ上の文字列に対してルーラーを表示したところ)
アウトライン表示
<div> タグや <p> タグなどの、Web ブラウザー上には直接表示されないエレメントの位置やサイズを確認するには、メニュー[ツール] – [アウトライン要素] を選択します。
[アウトライン要素] ダイアログボックスが表示されるので、[セレクター] テキストボックスに CSS セレクターを入力し、[色] の覧で対応する色を指定して [追加] ボタンをクリックします。
(アウトライン指定ダイアログボックス)
その後 [更新] ボタンをクリックすると、指定された CSS セレクターが以下のように枠線表示されます。
(Web ページの div に対してアウトラインを指定したところ)
カラーピッカーによる色の確認
F12 開発者ツールのメニュー [ツール] - [カラー ピッカーを表示する] を使用すると、Web ページに使用されている色のサンプルを取得することができます。
[カラーピッカー] ダイアログボックスが表示されたら、スポイトマークのボタンをクリックし、Web ページで色を確認したい部分をクリックします。ダイアログボックス上に RGB の値と、色コードが表示されるので、任意の色が表示されたら [コピーして閉じる] ボタンをクリックし、クリップボードに情報を取得します。
([カラー ピッカー] ダイアログボックス)
この機能は、自分で作成した Web ページの色の確認はもちろんのこと、第三者が作成したページの色を調べる際にも使用することができます。
■
今回は Internet Explorer 9 付属の [F12 開発者ツール] の 機能の中で、Web ページの描画関連の情報の取得方法について紹介しました。
[F12 開発者ツール] のより詳しい情報については以下のドキュメントをご参照ください。
F12 開発者ツールで Web ページをデバッグする方法 http://msdn.microsoft.com/ja-jp/library/gg589507(VS.85).aspx
なお、Internet Explorer 9 のドキュメントでは、説明が割愛されている機能もありますので、合わせて以下のドキュメントも参照されることをお薦めします。
Windows Internet Explorer 8 開発者ツールを使用してサイトを修正する http://msdn.microsoft.com/ja-jp/library/cc817576.aspx
次回引き続き、[F12 開発者ツール] の機能について書く予定です。