[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css

ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。

サイトのキャプチャ

holmes.css - CSS Markup Detective

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)

下記のブックマークレットを使用します。
ブラウザのブックマーク(お気に入り)に登録して、ページ表示をした後実行してください。

holmes.cssの対応ブラウザ

対応ブラウザは下記の通りです。

  • Chrome 10+
  • Safari 5+
  • Opera 10+
  • Firefox 3.5+

holmes.cssのチェック内容

holmes.cssでは下記をチェックします。

  • 要素の必須となる属性
  • 「href=#」のような改善すべきマークアップ
  • W3Cで非推奨な要素
  • W3Cで非推奨な属性

holmes.cssは、リンク、画像をはじめ、さまざまなエレメントをチェックします。

サイトのキャプチャ

リンクのチェック

サイトのキャプチャ

画像のチェック

サイトのキャプチャ

属性のチェック

サイトのキャプチャ

要素のチェック

サイトのキャプチャ

W3C費推奨の属性のチェック

サイトのキャプチャ

空の要素

top of page

©2017 coliss