CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack
Post on:2019年9月10日
sponsors
flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。
ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。
My favorite CSS hack
by Gajus Kuizinas
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
5年もの間、私がコピペして利用してきたCSSのスニペットを紹介します。
|
1 2 3 4 5 6 7 8 9 |
* {background-color: rgba(255,0,0,.2)} * * {background-color：rgba(0,255,0、.2)} * * * {background-color：rgba(0,0,255、.2)} * * * * {background-color：rgba(255,0,255、.2)} * * * * * {background-color：rgba(0,255,255、.2)} * * * * * * {background-color：rgba(255,255,0、.2)} * * * * * * * {background-color：rgba(255,0,0、.2)} * * * * * * * * {background-color：rgba(0,255,0、.2)} * * * * * * * * * {background-color：rgba(0,0,255、.2)} |
このCSSは、私のお気に入りの発明の一つです。2014年にQuoraで共有して以来、現在でもこのCSSを支持する通知が毎日届きます。
このCSSは、何をするためのものだと思いますか？
答えは簡単です、CSSのレイアウトを確認する時に使用します。
試しに使用してみましょう。
CSSのレイアウトで問題になるのが、ページ上の要素が無地の背景または画像である場合を除き、テキストのノードや透過度のある画像などがレイアウトにどのように収まるのかが表示されないことです。
このCSSを使用すると、下記のようにレイアウトの構造と階層が明確になります。
CSSを適用（※背景色イエロー）
このCSSを使う大きな利点は、階層の深さによってカラーが異なるため、ページ上の各要素のサイズ・マージン・パディングを確認できることです。それらに不整合があれば、簡単に特定できます。
【訳者注】
ブラウザですぐに使えるように、ブックマークレットにしてみました。
Webページを表示してこのブックマークレットを使用すると、レイアウトの構造や階層を確認できます。
ブックマークレットを使用して、レイアウトを確認
sponsors
