![](https://res.cloudinary.com/techfeed/image//fetch/w_280,h_210,c_fill/https%3A%2F%2Fics.media%2Fentry%2F200819%2Fimages%2Feyecatch.png)
CSSを活用してHTMLのセマンティックエラーを指摘する方法
BRANK
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。