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