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は公開されません

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

コメント一覧

最近の投稿

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を使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

カテゴリ一覧

タグ一覧