こんにちは、株式会社ベストティーチャーで元気に働く たわら です。
「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか?」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。
こんな 無料会員登録 画面(!)があったとします。
こんないい感じのエラーメッセージを出してくれます。
ボク「これってどのCSSが当たっているんだろう???」
先輩「開発者ツールを見よう!」
まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます(Chromeの場合)。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。
最後に
リポジトリにはじめてさわる際などに役立つかもしれません!