Chromeの開発者ツールには、便利な機能がたくさんありますが、ここでは、CSSを確認する際に役立つ機能を紹介します。DevToolsの機能を知ることで、Web開発をよりスムーズに進められるようになります！
Computedタブ
［計算済み］は私が一番よく使うタブです。要素に実際に適用されているプロパティがアルファベット順に表示されます。［グループ］にチェックを入れると、LayoutやTextなどのカテゴリに分類されます。
この他にも以下のような便利な機能があります。
参考リンク：[計算済み] ペインの CSS について
Stylesタブ
［スタイル］タブにはソースへのリンクがあり、クリックすると［ソース］パネルが開き、該当のCSSが記述されている場所を確認できます。WordPressのテーマとプラグインどちらのCSSが適用されているのかを確認したいときに役立ちます。
その他にも以下の機能を知っておくと重宝します。
参考リンク：[Styles] ペインの CSS について
CSSを検索する
［計算済み］または［スタイル］タブにある［フィルタ］ボックスにプロパティまたは値を入力して検索できます。自分が書いたCSSが反映されないときに検索すれば、適用されているものと上書きされたものを素早く確認できます。見つからない場合は、セレクターを書き間違えているかもしれません。
参考リンク：要素の CSS を検索、フィルタする
CSSをコピーする
［スタイル］タブでCSSを右クリックするとコピーできます。コピーのオプションには以下のものがあります。
- セレクターをコピー
- すべての宣言（プロパティとその値）をコピー
- ルール（セレクターと宣言）をコピー
- CSSの変更をすべてコピー
参考サイト：CSS をコピー
その他の便利な機能
まとめ
ここで紹介したのは、DevToolsの機能のほんの一部です。Developer.Chrome.comのドキュメントをチェックして、さらに詳しく学んでみてください！
