CSSルールがグレー表示される？Chromeの要素インスペクタで原因を特定しよう！

2024-05-19

Chrome の要素インスペクタで CSS ルールがグレー表示される意味

グレー表示される理由はいくつか考えられます。

継承されたルール:

親要素から継承された CSS ルールはグレー表示されます。これらのルールは、直接編集することはできませんが、重要です。親要素のルールを変更することで、グレー表示のルールを無効にすることができます。
例えば、p 要素に font-size が設定されていなくても、親要素の font-size 設定が継承されてグレー表示される場合があります。

!important 宣言を使用していない限り、ユーザーエージェントまたは拡張機能によって無効化された CSS ルールはグレー表示されます。
例えば、特定の広告をブロックする拡張機能は、広告の CSS ルールを無効化することがあります。

特定のメディアクエリに一致しないルール:

メディアクエリを使用している CSS ルールは、条件が満たされない場合、グレー表示されます。
例えば、max-width: 768px のメディアクエリを持つルールは、画面幅が 768px を超えている場合はグレー表示されます。

適用されていないセレクタを持つルール:

現在のページに一致するセレクタを持っていない CSS ルールはグレー表示されます。
例えば、#header のような ID セレクタを持つルールは、#header ID を持つ要素が存在しない場合はグレー表示されます。

グレー表示された CSS ルールを編集するには:

要素インスペクタで該当のルールをダブルクリックします。
ルールを編集し、Enter キーを押して保存します。

補足:

ルールがグレー表示されているからといって、必ずしも問題があるわけではありません。多くの場合、継承されたルールやメディアクエリの影響でグレー表示されるだけです。
重要度の高い (!important) 宣言を使用すると、グレー表示されたルールを強制的に適用することができます。ただし、これは最後の手段としてのみ使用し、悪用は避けてください。

サンプルコード：グレー表示される CSS ルール

HTML:

<!DOCTYPE html>
<html>
<head>
<title>CSS ルールのグレー表示</title>
<style>
  /* 親要素のルール */
  body {
    font-family: Arial, sans-serif;
  }

  /* 特定のメディアクエリを持つルール */
  @media (max-width: 768px) {
    #container {
      font-size: 16px;
    }
  }

  /* 適用されていないセレクタを持つルール */
  .unused {
    color: red;
  }
</style>
</head>
<body>
  <p>これは段落です。</p>

  <div id="container">
    <p>これはコンテナ内の段落です。</p>
  </div>

  <span class="unused">未使用のクラス</span>
</body>
</html>

CSS:

/* 無効化されたルール */
#container p {
  font-weight: bold;
}

このコードを実行すると、次のようになります。

body 要素には font-family プロパティが設定されていますが、p 要素には設定されていません。要素インスペクタで p 要素を見ると、font-family プロパティがグレー表示されます。これは、親要素から継承されたルールであるためです。
画面幅が 768px を超えているため、#container 要素の font-size ルールはグレー表示されます。
.unused クラスはどの要素にも適用されていないため、.unused クラスのルールはグレー表示されます。
#container p ルールは !important 宣言を使用していないため、ユーザーによって無効化されるとグレー表示されます。

この例は、CSS ルールがグレー表示されるさまざまな状況を理解するのに役立ちます。

グレー表示された CSS ルールを操作するその他の方法

スタイルエディタを使用する

Chrome デベロッパーツールには、スタイルエディタと呼ばれるツールが用意されています。スタイルエディタを使用すると、すべての CSS ルールを一覧表示し、グレー表示されたルールを簡単に特定できます。

Chrome デベロッパーツールを開きます。
ソース タブをクリックします。
左側のツリーパネルで スタイル をクリックします。
グレー表示されたルールを見つけます。
ルールを編集し、保存ボタンをクリックします。

拡張機能を使用する

グレー表示された CSS ルールを操作するのに役立つ拡張機能がいくつかあります。これらの拡張機能を使用すると、ルールを無効化したり、削除したり、編集したりすることができます。

これらの拡張機能は、Chrome ウェブストアから無料でダウンロードできます。

JavaScript コードを使用して、グレー表示された CSS ルールを操作することもできます。これは、より高度なユーザー向けのオプションです。

例:

// #container p ルールを無効化する
document.querySelector('#container p').style.fontWeight = 'normal';

// .unused クラスのルールを削除する
document.styleSheets[0].deleteRule(10); // ルールのインデックスを取得する必要があります

このコードは、#container p ルールの font-weight プロパティを normal に設定し、.unused クラスのルールを削除します。

注意事項: