HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク「DiagnostiCSS」
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.22.37.1381236984.png)
MOONGIFTで実行しました。様々な枠が表示されました。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.22.46.1381236992.png)
マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.23.14.1381236999.png)
かなりダメなところは赤い枠になっています。
DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。
HTMLの構造チェックを行ってくれるサービスはありますが、行番号で指定するものが多く、実際にどこがダメなのか探すのに時間がかかってしまったりしました。その点DiagnostiCSSでは見ているページ上に重ねてくれるので分かりやすいです。
こうした問題点は見た目では普通に見えてしまっているために分かりづらいのですが、クローラーであったり点字ブラウザなど他の環境下において不具合を起こしたりします。ちょっとした修正ですがこまめに対応するのが良いでしょう。
DiagnostiCSS — Visually detect any potentially invalid or inaccessible HTML markup