1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。

デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。

サイトのキャプチャ

Trashy.css
Trashy.css -GitHub

Trashy.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。

ブラウザで簡単に利用できるブックマークレットも用意されています。

ブックマークレット
Trashy.cssのブックマークレット

ブックマークレットを使用すると、以下のCSSファイルが適用されます。

これらのCSSファイルはすべて、または個別に適用することができます。

どのように表示されるか見てましょう。
まずは通常のHTMLページで、セマンティックのタグで実装された要素の構造が可視化されます。

サイトのキャプチャ

Example page: trashy.boxes.css

続いて、validではないページに適用した場合です。それぞれの要素にinvalidなものが明示されます。

サイトのキャプチャ

Example page: invalid HTML

デバッグ機能も備えており、「trashy.debug.css」を使用すると、エラーの内容が明示されます。

サイトのキャプチャ

Example page: invalid HTML + trashy.debug.css

sponsors

top of page

©2018 coliss