無効、オーバーライドされた、無効な CSS、その他の CSS を検索する

Sofia Emelianova
Sofia Emelianova
GitHub

このガイドは、Chrome DevTools での CSS の検査に精通していることを前提としています。基本については、CSS の表示と変更をご覧ください。

作成した CSS を検査する

要素に CSS を追加し、新しいスタイルが適切に適用されていることを確認するとします。ページを更新すると、要素は以前と同じように表示されます。エラーが発生しました。

まず、要素を検証して、新しい CSS が実際に要素に適用されていることを確認します。

新しい CSS が [要素] > [スタイル] ペインに表示されても、新しい CSS は淡いテキストで編集不可、取り消し線が引かれたり、横に警告やヒントのアイコンが付いたりすることがあります。

[Styles] ペインの CSS について

[スタイル] ペインでは、CSS に関するさまざまな問題が認識され、さまざまな方法でハイライト表示されます。

一致したセレクタと一致しないセレクタ

[スタイル] ペインでは、一致したセレクタが通常のテキストで表示され、一致しないセレクタは淡いテキストで表示されます。

通常のテキストの一致するセレクタとペールのテキストの一致しないセレクタです。

無効な値と宣言

[Styles] ペインに取り消し線が引かれ、その隣に 警告。 警告アイコンが表示されます。

  • CSS プロパティが無効または不明な場合の CSS 宣言全体（プロパティと値）。
  • CSS プロパティは有効だが無効な場合の値のみ。

プロパティ名とプロパティ値が無効です。

上書きされたイベントデータ

[スタイル] ペインでは、カスケードの順序に従って他のプロパティでオーバーライドされているプロパティに取り消し線が引かれます。

この例では、要素の width: 300px; スタイル属性が .youtube クラスの width: 100% をオーバーライドします。

無効

[スタイル] ペインは薄いテキストで表示され、有効なプロパティの横には 情報。 情報アイコンが配置されます。ただし、他のプロパティが原因で効果がないプロパティもあります。

これらの淡いプロパティは、カスケード順序ではなく、CSS ロジックのため無効になっています。

ヒント付きの CSS 宣言が無効です。

この例では、display: block; プロパティにより、Flex レイアウトまたはグリッド レイアウトを制御する justify-content と align-items が無効になります。

継承済みと非継承

[Styles] ペインには、デフォルトの継承に応じて Inherited from <element-name> セクションのプロパティが一覧表示されます。

  • 通常のテキストではデフォルトで継承されます。
  • 継承されないテキストは、デフォルトでは淡いテキストで表示されます。

継承された CSS と継承されていない CSS が表示された [継承元本文] セクション。

省略形

短縮プロパティ（簡潔）を使用すると、複数の CSS プロパティを一度に設定できるため、スタイルシートを読みやすくすることができます。しかし、このようなプロパティの短い性質のために、省略形によって暗黙的に示唆されるプロパティをオーバーライドする冗長な（正確な）プロパティを見落とすことがあります。

[Styles] ペインには、短縮プロパティが プルダウン。 プルダウン リストとして表示され、短縮されるすべてのプロパティが含まれています。

プルダウン リストを持つ省略形プロパティ。

この例では、4 つの短縮プロパティのうち 2 つが実際にはオーバーライドされています。

編集不可

[スタイル] ペインには、編集できないプロパティが斜体で表示されます。たとえば、次のソースの CSS は編集できません。

  • user agent stylesheet - Chrome のデフォルトのスタイルシート。

    ユーザー エージェント スタイルシートの CSS。

  • 要素のスタイル関連の HTML 属性（高さ、幅、色など）。これらは DOM ツリーで編集できます。編集すると、[スタイル] ペインの CSS が更新されますが、その逆はできません。

    この例では、<svg> 要素の height="48" 属性は 50 に設定されています。これにより、[Styles] ペインの svg[Attributes Style] の下にある対応するプロパティが更新されます。

想定どおりのスタイルが設定されていない要素を調べる

問題を見つけるため、以下の点を確認してください。

[要素] > [スタイル] ペインには、さまざまなスタイルシートで記述された CSS ルールとまったく同じセットが表示されます。一方、[要素] > [計算済み] ペインには、Chrome が要素のレンダリングに使用する解決済みの CSS 値が一覧表示されます。

  • 継承から派生した CSS
  • カスケード受賞作品
  • 短縮形（簡潔）ではなく、記述的プロパティ（正確）
  • 計算された値（例: font-size: 70% ではなく font-size: 14px）

[計算済み] ペインの CSS について

また、[計算済み] ペインでは、さまざまなプロパティが異なって表示されます。

宣言と継承

[計算済み] ペインには、任意のスタイルシートで宣言されているプロパティが通常のフォントで表示され、その要素自体のプロパティと継承されたプロパティの両方が表示されます。ソースを表示するには、その横にある展開アイコン 開く をクリックします。

宣言されたプロパティ。

[スタイル] ペインで宣言を表示するには、展開したプロパティにカーソルを合わせ、右矢印。 矢印ボタンをクリックします。

プロパティの横にある矢印ボタン。

[Sources] ペインで宣言を表示するには、ソースファイルへのリンクをクリックします。

ソースファイルへのリンク。

複数の参照元がある宿泊施設の場合、[計算済み] ペインにはカスケードの優位性が最初に表示されます。

複数の参照元を持つプロパティ。

ランタイム

[計算済み] ペインには、実行時に計算されたプロパティ値が薄いテキストで表示されます。

実行時に計算されるプロパティ値。

この例では、Chrome は <ul> 要素について次の計算を行いました。

  • width とその親である <div>
  • 子（2 つの <li> 要素）に対する height

非継承とカスタム

[計算済み] ペインにすべてのプロパティとその値を表示するには、[チェックボックス。 すべて表示] チェックボックスをオンにします。すべてのプロパティには次のものがあります。

この大きなリストをカテゴリに分類するには、[チェックボックス。 グループ] チェックボックスをオンにします。

すべての宿泊施設がグループ化されています。

この例では、[Animation] にある非継承プロパティと [CSS Variables] にあるカスタム プロパティの初期値を示します。

重複を検索する

特定のプロパティと重複している可能性があるものを調査するには、そのプロパティ名を [フィルタ] テキスト ボックスに入力します。これは、[スタイル] ペインと [計算済み] ペインの両方で行うことができます。

[スタイル] ペインと [計算済み] ペインの [フィルタ] テキストボックス

要素の CSS を検索してフィルタするをご覧ください。

未使用の CSS を探す

対象範囲: 未使用の JavaScript と CSS を見つけるをご覧ください。