HTML構造を可視化するTrashy.cssを試す


概要

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

というのがあって気になったので使ってみる

Trashy.cssを使うとHTMLの構造が可視化されるのでheader,nav,main,article,selction,footerなどの要素が正しく実装されているかを確認することができる

使い方

ブックマークレットが用意されているのでそちらを使って試してみる
※ Google Chromeのブラウザを使っている場合を想定

上記のようにブックマークを追加する時にURLにTrashy.cssのブックマークレットを貼り付ける

↓以下コピペ用(2018年9月現在のソースコード)

javascript:(function (d) {
  var f = Array.prototype.forEach;
  var linkTags = d.querySelectorAll('[rel=\'stylesheet\']');
  var styleTags = d.querySelectorAll('style');

  f.call(linkTags, function (x) {
    x.rel = '';
  });

  f.call(styleTags, function (x) {
    x.innerHTML = '';
  });

  var newLink = d.createElement('link');

  newLink.rel = 'stylesheet';

  newLink.href =
    'https://t7.github.io/trashy.css/css/bookmarklet.css';

  d.head.appendChild(newLink);
})(document);

ブックマークレットを作成した後、構造を可視化させたいサイトを開いた状態でブックマークレットを開くと構造を可視化することができる

モジロイサイトの構造を可視化させた例

エラー内容が赤く表示されていることがわかる…


Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です