LoginSignup
4
1

More than 3 years have passed since last update.

開発環境で「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか?」を確認する方法

Last updated at Posted at 2020-11-28

こんにちは、株式会社ベストティーチャーで元気に働く たわら です。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか?」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな 無料会員登録 画面(!)があったとします。

image.png

こんないい感じのエラーメッセージを出してくれます。

image.png

ボク「これってどのCSSが当たっているんだろう???」
先輩「開発者ツールを見よう!」

まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます(Chromeの場合)。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

Best_Teacher.png

最後に

リポジトリにはじめてさわる際などに役立つかもしれません!

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1