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担サイト 上に再掲したものです。
コメント
Firefoxと富士通は。
こんにちは。
日常的な制作では、Firefoxアドオンの「Html Validator」がお気軽で便利ですね。
ウインドウ右下でリアルタイムでチェックしてくれるのでうっかりミスをなくしてくれます。
あと有名どころとしては、富士通の「WebInspector」。
なかなかこれを使うほどの機会はありませんが・・、HTML-lintで物足りなさを感じたら、ぜひ。
ありがとうございます
編集部の安田です。情報追加ありがとうございます。
あとは、各種ブラウザでの表示を見せてくれるbrowsershotsのようなサービスもありましたね。
ちなみに、鎌田さんのブログの記事ウェブデザイナーの便利帳 画面サイズは大きくなるかですが、ちょうどWeb担でもデータをとっている分を最近眺めていたので、近々(といっても来年の分になるのかな)メールマガジンでコラムにしてみようと思います。ネタの気づきをいただき、ありがとうございます。
楽しみにしています
ちょうど仕事上で、画面サイズの最新動向は? みたいな話題になっていたので、コラム楽しみにしています。
Validator Donation Program
W3Cでは、今後の検証ツールの改善を目的に、寄付を募っています。ツールをご紹介されているのですから、是非そのValidator Donation Programについてもご紹介いただければと:
http://www.w3.org/QA/Tools/Donate
W3Cのvalidator改善のために寄付を
編集部の安田です。年末年始を挟んでうっかりとコメント返信を失念しておりました。失礼しました。
donation programの情報追加、ありがとうございます。
W3Cの性格上、やはり寄付が大切なのですね。W3CのHTMLチェッカーを利用されている方は、寄付を検討してみてくださいませ。
無料で利用できるのは、無料で提供してくれる人がいるからであって、その恩恵を得るにはやはり協力が大切ですね。
ただ、日本では「寄付」という文化があまり浸透していないので、企業としてうまく協力できる仕組みがあると、もっと良いのではないかと思います。