Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8655

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

$
0
0

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

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

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

image.png

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

image.png

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

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

Best_Teacher.png

最後に

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


Viewing all articles
Browse latest Browse all 8655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>