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

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる 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等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧