CSSによる階層を視覚化（ハイライト）

CSSで組んだレイアウトの入れ子構造を、階層ごとに背景色を変えて視覚的に確認したいときに使うブックマークレット。実行すると、DOMの深さに応じて要素の背景色が赤・緑・青…と順番に変わり、レイアウトの階層構造がひと目で分かるようになる。

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type', 'text\/css');style.innerHTML='* {background-color: rgba(255,0,0,.2)!important;}* * {background-color%EF%BC%9Argba(0,255,0%E3%80%81.2)!important;} * * * {background-color%EF%BC%9Argba(0,0,255%E3%80%81.2)!important;} * * * * {background-color%EF%BC%9Argba(255,0,255%E3%80%81.2)!important;} * * * * * {background-color%EF%BC%9Argba(0,255,255%E3%80%81.2)!important;} * * * * * * {background-color%EF%BC%9Argba(255,255,0%E3%80%81.2)!important;} * * * * * * * {background-color%EF%BC%9Argba(255,0,0%E3%80%81.2)!important; } * * * * * * * * {background-color%EF%BC%9Argba(0,255,0%E3%80%81.2)!important;} * * * * * * * * * {background-color%EF%BC%9Argba(0,0,255%E3%80%81.2)!important;}';head[0].appendChild(style);})();

[CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack

コリス](https://coliss.com/articles/build-websites/operation/css/my-favorite-css-hack-by-gajus.html)