[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css
Post on:2011年5月19日
sponsors
ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。
holmes.css - CSS Markup Detective
[ad#ad-2]
holmes.cssを使用すると、下記のデモページのように該当箇所をハイライトで明示します。
- レッドのハイライト
- エラー
- イエローのハイライト
- 警告
- グレーのハイライト
- 好ましくない
holmes.cssの使い方
holmes.cssの使い方は、2通りあります。
- スタイルシートファイルをページに適用
- ブックマークレットを使用（要JavaScript）
スタイルシートファイルをページに適用
「holmes.min.css」を外部スタイルシートとして適用し、bodyにclass「holmes-debug」を加えます。
HTML
<link rel="stylesheet" href="../" media="screen,projection,print,handheld" type="text/css" /> <body class="holmes-debug">
ブックマークレットを使用（要JavaScript）
下記のブックマークレットを使用します。
ブラウザのブックマーク（お気に入り）に登録して、ページ表示をした後実行してください。
[ad#ad-2]
holmes.cssの対応ブラウザ
対応ブラウザは下記の通りです。
- Chrome 10+
- Safari 5+
- Opera 10+
- Firefox 3.5+
holmes.cssのチェック内容
holmes.cssでは下記をチェックします。
- 要素の必須となる属性
- 「href=#」のような改善すべきマークアップ
- W3Cで非推奨な要素
- W3Cで非推奨な属性
holmes.cssは、リンク、画像をはじめ、さまざまなエレメントをチェックします。
リンクのチェック
画像のチェック
属性のチェック
要素のチェック
W3C費推奨の属性のチェック
空の要素
sponsors
