品質を高めるためのHTMLとCSSの文法チェックツール

よこのじ（@yokonoji_work）です。

HTMLとCSSのコーディングは結果が見た目でわかるので、文法的な記述に注意することは少ないかもしれません。しかし、タグの閉じ忘れや;（セミコロン）忘れといううっかりミスは必ず起こるものですし、Webサイト制作の品質を安定的なものにするにはチェックは必要かと思います。そういうわけで、HTMLとCSSの文法をチェックできるツールをまとめておきます。

Markup Validation Service

Markup Validation Serviceは、HTMLやCSSなどのWeb関連技術の標準化を行うW3C：World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）が提供しているオンラインのチェックツールです。

このように問題箇所（行・列）とその内容を示してくれます。仕様に沿った記述となっているか、タグの閉じ忘れがないかなどのチェックが入りますので、これらを修正すれば十分な品質が得られます。

URL指定：〇
ファイル入力：〇
コード貼り付け：〇

dirtyMarkup

dirtyMarkupは、HTML、CSS、JavaScriptの文法チェックが可能なオンラインのチェックツールです。

これは、2行目のdivタグの閉じ（>）を消してみた状態です。これにより、文法エラーとして赤いマーカーが現れました。内容自体は示してくれないようですが、簡易的なチェックとしてはわかりやすくて良いと思います。

dirtyMarkupの良いところは、コードの整形を行ってくれるところです。コードを貼り付けてCleanと書かれたボタンを押すと、インデントを適切に入れてくれた視認性の良いコードに整形してくれます。

URL指定：×
ファイル入力：×
コード貼り付け：〇

Another HTML-lint

Another HTML-lintは、ハートコアという日本の企業が提供するオンラインのチェックツールです。日本語で使うことができるのがうれしいですね。

チェックの結果は点数付きで示してくれます。エラー内容とともに解説を提示してくれる親切なつくりです。severity（重症度）が高いものは慎重に内容を確認するのがよさそうです。

その他のチェックツール

上で挙げたチェックツールとは異なり、文法チェックをするものではありませんが、作業を補助するツールとして役立つかもしれません。

HTML Coding Checker（β版）

下記のような機能を備えた、HTMLコーディングの補助ツールです。定規でページ要素のサイズを測定してデザインの参考にするような使い方ができます。Google Chromeの拡張機能です。

• リンク先の生存チェック
• META情報の一覧化
• スタイル名の一覧化
• 画像ファイルの一覧化
• リンク領域のハイライト
• 要素のハイライト
• 定規ツール
• デザイントレース

HTML 5 Outliner

HTMLコードに記述されている見出しの階層がどのようになっているのか表示してくれます。

HTMLエラーチェッカー

閲覧ページのHTMLコードのエラーを表示してくれます。Google Chromeの拡張機能です。