Windows TIPS
[Tools & Services]
Tips   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)などサーバ側で処理される部分は正しく検証できないので注意が必要だ。End of Article

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

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

「Windows TIPS」

@IT Special

- PR -

TechTargetジャパン

Windows Server Insider フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Windows Server Insider 記事ランキング

本日 月間
ソリューションFLASH