Windows TIPS

［Tools & Services］

→ Windows TIPS TOPへ → Windows TIPS全リストへ → 内容別分類一覧へ IE8でWebページのHTML／CSSの記述ミスがないか検証する → 解説をスキップして操作方法を読む デジタルアドバンテージ 島田 広道 2010/06/18 対象ソフトウェア Internet Explorer 8

■ Webページの表示が乱れる原因の1つに、HTMLやCSSの記述ミスがある。 ■ IE8の開発者ツールを使えば、HTMLやCSSを検証するサービスによって素早く記述をチェックできる。

解説

　Webサイトの運用管理をしていると、サイト内のWebページをWebブラウザで開いたときの表示が乱れる、というトラブルに遭遇することがある。その原因はさまざまだが、1つには更新やメンテナンスの際にHTMLファイルやCSSファイルの記述を誤ることが挙げられる。特にささいな修正の場合、テキスト・エディタで直接HTMLやCSSを編集したりすると、うっかりタグ（セレクタ）を閉じ忘れるといったミスをしがちだ。

　HTMLもCSSも広義では言語の一種であり、構文の規則が定められている。これに則していない誤った記述をすると、Webブラウザは正しく描画できず、ページの表示がおかしくなってしまう。

　こうしたミスがないか確認するのに、いちいちHTMLファイルやCSSファイルを開いて目視で怪しそうなところを調べる、といった方法では手間がかかりすぎる。

TIPS「IE8の『開発者ツール』を活用する」 製品レビュー「Internet Explorer 8（前編)」

　そんな場合、Internet Explorer（IE） 8標準装備の「開発者ツール」を使えば、HTMLやCSSの記述を検証するサービスを素早く呼び出してチェックできる。この検証サービスとは、W3CというWeb技術の標準化団体がインターネットで公開しているもので、いわばリファレンス的な存在だ。検証の結果エラーが見つかると、その詳細がIE8のブラウザ・ウィンドウに表示される。これにより、トラブルの原因かもしれない個所を素早く確認できる。

操作方法

　まずIE8を起動し、表示のおかしくなったページを開く。次に［F12］キーを押すか、［ツール］−［開発者ツール］を実行して開発者ツールのウィンドウを開く。そこで［検証］メニューをクリックし、HTMLを検証する場合は［HTML］を、CSSの場合は［CSS］をそれぞれクリックすると、対応するサービスのWebページがIE8の新しいタブに表示され、検証が始まる。

開発者ツールの［検証］メニュー

IE8から［F12］キーを押すか、［ツール］−［開発者ツール］を起動すると、このウィンドウが表示される。

これをクリックするとHTML検証サービスが呼び出され、IE8で開いたWebページのHTML検証が始まる。→へ これをクリックするとCSS検証サービスが呼び出され、IE8で開いたWebページのCSS検証が始まる。→へ イントラネット・サイトなどインターネットに公開していないWebページは、ではエラーになって検証できない。その代わりにこれをクリックしてHTMLを検証する。→へ と同じくインターネット非公開のWebページのCSSは、の代わりにこれをクリックして検証する。→へ HTMLとCSSを同時に検証するには、これをクリックして表示されるダイアログボックスで、［HTML］と［CSS］のチェックボックスのチェックをオンにして［OK］ボタンをクリックする。

　検証が完了すると、次のような検証結果が表示される。

HTMLの検証結果が表示されたIE8のタブ

W3C提供の「Markup Validation Sevice」によって検証された結果が、IE8のブラウザ・ウィンドウの新しいタブに表示される。表記は英語だ。

検証の結果、見つかったエラーや警告の数。 　 HTMLのソースを表示したければ、このチェックをオンにしてをクリックする。 　 404エラーのようなエラー発生時に表示されるWebページを検証するには、このチェックをオンにする。 　 これをクリックすると検証が再実行される。 　 検証によって見つかった個々のエラーや警告は、これ以降に表示される。

CSSの検証結果が表示されたIE8のタブ

W3C提供の「W3C CSS 検証サービス」によって検証された結果が、IE8のブラウザ・ウィンドウの新しいタブに表示される。表記は日本語だ。

検証の結果、見つかったエラーの数。 　 各エラーの詳細。CSSファイルごとに分類されていて、行番号とタグ（セレクタ）／クラス名／ID名、エラーの内容がそれぞれ表示される 　 検証の結果、見つかった警告の数。 　 と同様、CSSファイルごとに各警告の詳細が表示される。この下には、検証したCSSファイルの内容が表示される。

　やでは、インターネット上の検証サービスが対象のWebページにアクセスして検証する仕組みなので、イントラネット・サイトなどインターネットに公開していないWebページは検証できない（エラーが発生する）。

　そんなときは、次のやのように、開発者ツールの［検証］メニューの［ローカルの HTML］あるいは［ローカルの CSS］をクリックし、対象WebページのHTMLファイルやCSSファイルを検証サービスにアップロードすると検証できる。ただし仕組み上、サーバ・サイド・インクルード（SSI）などサーバ側で処理される部分は正しく検証できないので注意が必要だ。

インターネットに公開していないWebページのHTMLを検証する

開発者ツールの［検証］−［ローカルの HTML］をクリックすると、このページが表示される。表記は英語だ。

これをクリックして、このタブを選択する。 　 検証したいWebページのHTMLファイルのありかをUNCなどで指定する。 　 これをクリックすると、前述のと同様に、ソース表示などのオプションを設定できる。 　 これをクリックすると検証が始まる。 　 ファイル共有が禁止されているなどの理由でHTMLファイルのありかを指定できない場合は、何らかの方法でHTMLファイルを開いて内容をクリップボードにコピーし、これをクリックしてペーストすると検証できる。

インターネットに公開していないWebページのCSSを検証する

開発者ツールの［検証］−［ローカルの CSS］をクリックすると、このページが表示される。表記は日本語だ。

これをクリックして、このタブを選択する。 　 検証したいWebページのCSSファイルのありかをUNCなどで指定する。複数のCSSファイルについては、1つずつ指定してチェックする必要がある。 　 これをクリックすると、検証時のCSSのバージョンなど、いくつかのオプションを設定できる。 　 これをクリックすると検証が始まる。 　 CSSファイルのありかを指定できない場合は、何らかの方法でCSSファイルを開いて内容をクリップボードにコピーし、これをクリックしてペーストすると検証できる。

「Windows TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）