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

Published: 2018年9月22日 by tomsato

概要

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);

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

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

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

CSS

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

カテゴリ一覧

タグ一覧