1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Post on:2018年9月20日
sponsors
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。
デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。
Construct.css
Construct.css -GitHub
Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。
ブラウザで簡単に利用できるブックマークレットも用意されています。
- ブックマークレット
- Construct.cssのブックマークレット
ブックマークレットを使用すると、以下のCSSファイルが適用されます。
- sanitize.css
※リセット用CSS（参考: reset.cssとnormalize.cssに続く新しいリセット用CSS - Construct.css
※Construct.cssのベースCSS - construct.boxes.css
※ボックス表示用 - construct.debug.css
※デバッグ用
これらのCSSファイルはすべて、または個別に適用することができます。
どのように表示されるか見てましょう。
まずは通常のHTMLページで、セマンティックのタグで実装された要素の構造が可視化されます。
Example page: construct.boxes.css
続いて、validではないページに適用した場合です。それぞれの要素にinvalidなものが明示されます。
デバッグ機能も備えており、「construct.debug.css」を使用すると、エラーの内容が明示されます。
sponsors
