良いデザインを行うためのCSSの下地を作ろう：いまさら聞けないCSS／スタイルシート入門（2）（3/3 ページ）

» 2008年10月07日 00時00分公開

[喜安亮介，有限会社タグパンダ]

W3Cマークアップバリデーションサービスの使い方

The W3C Markup Validation Service via kwout

　本家W3Cのサイト上に、自分が作成したHTMLやXHTMLファイルにエラーがないかどうかのチェックしてくれる無料のサービスがあります。こちらを利用して先ほど作ったHTMLソースコードの妥当性を検証してみましょう。

手順【1】W3Cマークアップバリデーションサービスのサイトへアクセス

　まず、W3Cマークアップバリデーションサービスのページにアクセスします。「Validate by URI（URLから検証する）」「Validate by File Upload（ファイルをアップロードして検証する）」「Validate by Direct Input（直接入力されたコードから検証する）」という3つの方法によりマークアップの妥当性を検証できます。

　今回はValidate by Direct Input（直接入力されたコードから検証する）からの検証を選択します。

手順【2】HTML/XHTMLコードを入力し検証

図4　コード直接入力での検証

　検証したいXHTMLコードを「Enter the Markup to validate:（検証したいマークアップを入力してください）」と書かれたすぐ下の入力欄に張り付けます。先ほど作成した「index.html」ファイルのXHTMLコードを入力して検証してみましょう。

手順【3】エラーがあれば修正、なければ検証完了

図5　正常時の検証結果

　エラーがなく妥当なXHTML 1.0のコードの場合は上のように画面が表示されます。

　キャプチャ画面にあるように、「This document was successfully checked as XHTML 1.0 Strict!（この文書はXHTML 1.0 Strict型としてのチェックが成功しました！）」という緑色の帯に白抜きの文字が表示されればエラーのないきれいなコードということです。

図6　エラー時の検証結果

　もしエラーがあった場合は「Errors found while checking this document as XHTML 1.0 Strict!（XHTML 1.0 Strictの文書型でこの文書をチェックの際エラーが発見されました！）」といった赤い帯上に白抜きの文字で警告画面が表示されます。

　キャプチャ画面の例では、その下のResult（結果）の行には「5 Errors」という表示があり5つの個所でコードエラーが発見されています。

FirefoxアドオンのHTMLバリデータもある

Html Validator for Firefox and Mozilla via kwout

　「Html Validator」はFirefoxのアドオンとしてMarc Gueury氏が開発しているHTML/XHTMLの文法検証ツールです。検証アルゴリズムとしてW3Cが開発した「Tidy」や、SGMLパーサの「OpenSP」がベースとなっているため、W3Cマークアップバリデーションサービス（http://validator.w3c.org)と同じ検証結果が得られます（※検証アルゴリズムとしてSGMLパーサを選択した場合）。

　このツールはHTML/XHTMLコードのアクセシビリティチェックや、文法エラーが起こっているソースを自動的に修正してくれる機能もあるため非常に強力です。プロの方はこのツールでチェックした後、ダブルチェックで本家のW3Cマークアップバリデーションサービスで検証することをオススメします。

　Firefoxを普段使ってない方でもWeb開発者の方であれば、ぜひこのツールを使ってみるとよいでしょう。