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

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

作成した CSS を検査する

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

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

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

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

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

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

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

無効な値と宣言

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

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

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

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

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

無効

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

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

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

継承済みと非継承

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

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

省略形

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

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

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

編集不可

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

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

  

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

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

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

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

• CSS ドキュメントと [スタイル] ペインのツールチップのセレクタの限定性
• [計算済み] ペイン。要素に適用された最終的な CSS を確認し、宣言した CSS と比較します。

[要素] > [スタイル] ペインには、さまざまなスタイルシートで記述された 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 を見つけるをご覧ください。