DevTools のヒント: CSS の問題を見つける

Sofia Emelianova
Sofia Emelianova

要素に CSS を適用しても機能しないことがありますか?

Chrome DevTools を使用すると、CSS の問題を一目で見つけ、デバッグしてテストできます。

動画で、[Elements] > [Styles] ペインにさまざまな CSS の問題がハイライト表示される仕組みをご覧ください。

  • 警告。 無効な構文のプロパティ

  • チェックボックス。 オーバーライドされたプロパティ

  • チェックボックス。 無効なプロパティ 情報。ヒント付き。

  • parent から継承

    • チェックボックス。 継承されたプロパティ
    • チェックボックス。 継承されないプロパティ
  • チェックボックス。 拡張可能な省略形プロパティ 展開する。

    • チェックボックス。 オーバーライドされた長いプロパティ
    • チェックボックス。 有効な長いプロパティ

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

  • 編集不可のプロパティ
  • 編集不可のプロパティがオーバーライドされている

その他のデバッグのヒント:

  • [スタイル] ペインでフィルタを使用して、関心のある 1 つのプロパティに絞り込むことができます。
  • [計算済み] ペインを使用して、すべてのCascadeの落札者とその計算値を確認します。
  • [計算] ペインでプロパティを開き、リンクをクリックして [スタイル] ペインでソースを見つけます。

デベロッパー ツールで CSS の問題がハイライト表示されるすべての方法については、無効、オーバーライド、無効などの CSS を見つけるをご覧ください。

CSS の専門知識を深めるには、CSS を学ぶをご覧ください。

誰にとっても見やすく、使いやすいウェブサイトを作成する方法については、レスポンシブ デザインについてをご覧ください。