by shigemk2

当面は技術的なことしか書かない

CSSのデバッグテクニック

CSS

CSSを修正しているわけですが、
どこのCSSを修正してるのか分からなくなるときがあるよね。

たとえば、要素Aを修正しようとしたら、見当違いの場所を修正してしまったということが
たまにあるよ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hoge</title>
    <link rel="stylesheet" type="text/css" href="./example2.css" />
  </head>
  <body>
    <article class="hoge"></article>
    <article class="foo"></article>
    <article class="buzz"></article>
  </body>
</html>

article.hoge {
  width: 100px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 0;
}

article.foo {
  width: 100px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 0;
}

article.buzz {
  width: 100px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 0;
}

そういうときは、要素のbackground-colorを修正すると、どこを修正しようとしている(してた)のか
分かりやすくなるよ。