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

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS

[coliss]

検証用のスタイルシート、すごい簡単で便利です。

[ifttt]

言うほど便利か？と思ってしまう俺にこのブコメ欄は肩身がセマンティック

[ku__ra__ge]

firefoxの3Dビューが最強だったのだが、いつのまにかオミットされていた　https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/3D_view

[aTn]

私はWeb Developerで十分です。 https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

[adsty]

Webページに実装されているHTML要素の構造を可視化して確認できる。

[rainbow_doll]

まぁこの界隈はツール一つ選ぶのもセンス必要よね

[solidstatesociety]

結局探すのは「いちからか」って感じに

[rryu]

ダメな入れ子の要素や空の属性値などのセレクタを死にほど用意してCSSでエラーを表示しているのか…

[masapon49]

デバッグにいい

[kote2kote2]

超欲しくて作ろうと思ってたとこ！マジ助かる。

[myoukabi]

そうそう、こんなの欲しかった。

[otchy210]

"「trashy.debug.css」を使用すると、エラーの内容が明示されます。 " 全部 CSS でやったって事？無茶しやがって…。

[wdr_s]

おお、これは便利

[cankyan]

便利そう

[psfactory]

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

[fashi]

前はこういうのWebDeveloper拡張に入ってたけど開発者ツールが便利になってから使われなくなってたな

[hatorihatorihatorik]

すごく便利！！chromeの検証機能じゃなくてこっちを使うようにしてみよう！

[akiramaz]

おもしろい

[KENSHIN_TANAKA]

こりゃ便利ね

[kicchysan]

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