【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々

htmlやCSSをコーディングしていると、本当にコードが正当（valid）なのかどうかを確かめたくなるところ。記述している時には十分に気をつけているつもりが、ちょっとしたケアレスミスが後から発覚するケースも多いはず。

クライアントからもW3Cでvalidでとか、lintで何点以上とか依頼をされることもあるのではないでしょうか？
htmlやcssのコードはブラウザで簡単に確認されてしまうので、情けないコードは書きたくないところ。という訳で自分が過去に使っていたコードチェッカーを紹介してみます。

Web Accessibility Toolbar

まず最初がInfoaxia(インフォアクシア)の「Web Accessibility Toolbar」です。コードをバリバリ書いていた頃によく使っていました。
対応ブラウザはIEのみ。以下からダウンロードできます。

ツール＆ダウンロード － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
http://www.infoaxia.com/tools/index.html

CSSを無効にしたり、後述するW3CのコードチェックやAnother HTML-lintでのコードチェックを利用することができます。

Web Developer

FireFoxのアドオン「Web Developer」です。こちらもよく使っていました。ただFireFoxがバージョンアップされる度に対応していないアドオンになってしまったのであまり使用頻度は高くありませんでしたが、有用性はピカイチです。日本語版は以下からダウンロードできます。

Webdeveloperのダウンロード：ミナトラボ
http://lab.tubonotubo.jp/tools/webdeveloper/index.html

こちらもCSSを無効にしたり、div要素やtable要素を枠で囲ったり、htmlやcssの検証が出来たりと様々な機能があります。
また紹介記事がありましたので併せて載せておきます。

Web Developerでウェブサイトを構築・デバッグ - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20377856,00.htm

Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20378300,00.htm

Another HTML-lint

有名すぎる程有名でコーダーの中では定番ともいえるツールが「Another HTML-lint」です。html/xhtmlのコードチェックが出来る上に、日本語で解説が表示されます。

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

URLを入力してそのファイルのチェックも出来ますし、直接htmlコードを記述してのチェックもできます。

The W3C Markup Validation Service

Web標準化団体W3Cが提供する「The W3C Markup Validation Service」です。html/xhtmlの文法チェックが出来ます。解説結果は英語で表示されますが、比較的平易な英語なのでそれほど苦にはなりません。

The W3C Markup Validation Service
http://validator.w3.org/

URL、ファイルアップロード、直接記述の3つの方法で検証ができます。

W3C CSS 検証サービス

一方のこちらがCSSのコードチェックをしてくれるW3Cのサービスです。こちらは日本語版がありました。

W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/validator.html.ja

htmlコードチェックサービスと同じくURL、ファイルアップロード、直接記述の3つの方法で検証ができます。


自分が使ってきたツールは以上の通りです。基本的には内製でWebページは制作していたので、こららのツールを使ってW3Cではvalid、lintでは「良く出来ました」辺りをターゲットとして制作していました。本当は満点を目指したいところだったのですが、システム側で指定されたタグを使わなければならなかったりしたので止むを得ないところですね。

今ではもっと有効なツールがあるかもしれないので探してみると良いでしょう。

関連記事

• ユニバーサルセレクタ（*）はもう古い？
• 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
• 【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話
• XHTML+CSSスタンダード・デザインガイド
• IE7をスタンドアローンでインスコ
• 【html/xhtml】ユーザビリティを高める「<label>」の使い方
• 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
• クソIEをハックしてやる！（IEの条件分岐の使い方）
• ブラウザのレンダリングモード切替スイッチ一覧
• 【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々

タグ（ブログ内検索もできます）：xhtml html css コード チェック