Web担のサイトを少しずつ改善するなかで、久しぶりにサイト全体にわたってHTMLが正しく使われているかをチェックしてみました。結論としては、やっぱり、ちゃんとHTMLチェックとかしないとダメですね……。
というのも、先日、Operaでだけトップページの表示が崩れるという現象があったのです。Web担では、記事ごとのHTMLは基本的にすべてHTMLチェッカーを通して確認していて、記事本文のHTMLは公開前にチェックされています。しかし、一覧ページに表示されるHTMLの部分(「ティーザー」と呼んでいます)がそのチェックフローから漏れていたことが判明したのです。早速、社内で使っている記事HTMLチェックの仕組みを修正して、ティーザーもHTMLチェックされるようにしました。
そういうことがあったので、サイト全体のテンプレートなどもHTMLチェックを通してみました。もともと、Web担のテンプレートのHTMLにはその場しのぎで作ったものもあり、なぜか<span>の中に<div>が入っていたり、XHTMLで宣言しているのになぜかHTML 4系の属性を使っていたりするので、そういった点を改めてチェックして、いろいろと修正しました。
有名なHTMLチェッカーというと、やはり次の2つでしょうか。
- The W3C Markup Validation Service
→ http://validator.w3.org/
- Another HTML-lint
→ http://openlab.ring.gr.jp/k16/htmllint/
Web担では、Another HTML-lintを使っています。チェック項目などを細かく指定できることや、社内のサーバーにインストールして負荷を気にせずに使えるからというのが理由です(もちろん商用利用になるので、利用料をちゃんと支払ってますよ)。
CSS(スタイルシート)のチェッカーは、やはりW3Cのものが良いようです。インターフェイスも日本語化されていますし。
- W3C CSS 検証サービス
→ http://jigsaw.w3.org/css-validator/
ちなみに、Web担ではHTMLやCSSのチェッカーで100点を目指すことはしていません。CMSの制限上どうしても正しいHTMLではない形で実現したほうがスムーズに機能を実現できる場合などもありますし、ブラウザによって違うCSSを読ませるハックなども使っていますからね。もちろん正しいHTMLであるほうが何となく気分は良いのですが、そこにこだわってしまうと目的達成の近道から外れてしまう場合は無理に適合させなくてもいい、というルールを自分の中で作ってやっています。
あと、リンクチェックに関しては、Web担では外部からチェックするよりもCMSのなかで処理したほうが早いので独自のツールを作って使っていますが、W3Cの提供しているリンクチェッカーもかなり優秀ですね。
- W3C Link Checker
→ http://validator.w3.org/checklink
リダイレクトなどもちゃんと処理して調べてくれますし、サーバーへの負荷もかかりすぎないように調整してくれます。広告システムの画像までチェックしているのでJavaScriptを解釈して実行しているのかと驚きましたが、単に<noscript>の部分を読んで処理しているだけですね。
チェッカー類はデスクトップアプリケーションなどいろいろありますが、個人的にはAnother HTML-lintとW3Cのサービスを押さえておけば、Web担当者としては悪くはないんじゃないかと思います。
ほかにも、あなたのオススメのチェッカーなどありましたら、教えていただけるとありがたいです。
この記事は、メールマガジン「Web担ウィークリー」やINTERNET Watchの「週刊 Web担当者フォーラム通信」に掲載されたコラムをWeb担サイト 上に再掲したものです。
- この記事のキーワード