マークアップのチェックツールは数多くありますが、 適切ではないマークアップ部分をCSSを使ってチェックし、 視覚的に教えてくれるのが「holmes.css」です。
使い方は2通りあり、
- 「holmes.css – CSS Markup Detective」 からダウンロードしたCSSファイルを、htmlに読み込む
- ブックマークレットを使用する
のいずれかです。
CSSを外部ファイルとして読む込む場合は、bodyタグに対して、「holmes-debug」というclassをつけます。
<link rel="stylesheet" href="../" media="screen,projection,print,handheld" type="text/css" /> <body class="holmes-debug">
ブックマークレットを使用する場合は、下記のソースをブックマーク（お気に入り）として登録し、 チェックしたいページをブラウザで表示後、実行するだけです。
javascript:(function(){holmes=document.createElement('LINK');holmes.href='http://github.com/redroot/holmes/raw/master/holmes.min.css';holmes.rel='stylesheet';holmes.type='text/css';document.body.appendChild(holmes);document.getElementsByTagName('body')[0].className+='%20holmes-debug';})();
CSSを読み込むと、完成時に削除する必要があるので、 ブックマークレットを使用するほうが便利な使い方ではないかと思います。
対応しているブラウザは、
- Google Chrome 10+
- Safari 5+
- Opera 10+
- Firefox 3.5+
となっています。
チェック項目は、
- 要素の必須となる属性
- 改善すべきマークアップ（例：「href=#」）
- W3Cで非推奨な要素・属性
で、それらを
- エラー＝赤枠
- 警告＝黄枠
- 推奨＝グレー枠
で囲んで表示してくれます。
上記のように、適切ではない部分は、赤、黄色、グレーの枠で囲んで表示されます。 すべて適切にマークアップされていた場合は、画面に何の変化もないため、 ちゃんとチェックされているのかどうか、いまいちわかりづらいのが難点ですが、 マークアップしながら手軽にチェックできるツールとして使えるのではないでしょうか。
【参考サイト】