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

Post on:2018年9月20日

sponsors

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

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

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

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

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

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

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

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

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