間違った使い方をしているHTMLをハイライトしてくれるスタイルシート「debugCSS」

間違った使い方をしているHTMLをハイライトしてくれるスタイルシート「debugCSS」

間違った使い方をしているHTMLをハイライトしてくれるスタイルシート「debugCSS」

debugCSSは、仕様に反する使い方をしているHTMLをハイライトしてくれるスタイルシートです。CSSファイルを読み込むと、間違った使い方をしているHTMLがあったら、ハイライトして知らせてくれます。

デモはこちらからご確認ください。[debugCSS]ボタンをクリックすると、「Errors」「Warnings」「Notices」の数とハイライトが表示されます。また、このボタンをブックマークするとブックマークレットとして機能します。

debugCSSの使い方

debugCSSの使い方は簡単です。まずGitHubからdebugCSS.cssをダウンロードし、チェックしたいHTMLでCSSファイルを読み込むだけです。

<link rel="stylesheet" href="debugCSS.css">

試しに無料のテンプレートで試してみたら、以下のようにハイライト表示されました。

debugCSSの使い方

あとがき

Another HTML LintなどのLintツールを使ってチェックした方が早い気もしますが、ブックマークレットだとサクッと確認できて良いですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です