こんにちは、makeshopの近藤です。
いつもmakeshopをご利用いただきありがとうございます。

今回はどの要素にどのCSSが指定されているかカンタンにブラウザ上で確認する方法をご紹介いたします！

こんなお悩みありませんか？

・自分でHTML／CSSを作成してないからどうなっているかわからない
・divなどのid／class名がどのCSSの指定を反映しているのかすぐ知りたい
・ソースを読み解くのがしんどい

超カンタン！ブラウザ別CSSの適用箇所を一発で確認する方法！

実は各種ブラウザにはデベロッパー(開発者)ツールというものが存在します。
デベロッパーツールでは、カーソルを合わせた部分のソースや、その要素に適用されているCSSファイルとスタイルの行数を確認することができます。
さらに！ツール上で指定のスタイルを削除したり、指定されている数値を変えて、表示されているブラウザ上での見た目を確認できたりします。
本番環境のスタイルは書き変えられませんので、修正前の確認のみをカンタンにおこなうことができるのです。
便利ですね！
参考外部サイト：デベロッパーツールとは

それでは、各ブラウザでのデベロッパーツールの使い方をご紹介します！

GoogleChromeの場合

画面上で「F12」キーを押し、一番左のアイコンをクリックしてから、サイト上の検証したい要素に合わせ、ソースやスタイルを確認できます。
参考外部サイト：Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

Firefoxの場合

画面上で「F12」キーを押し、一番左のアイコンをクリックしてから、サイト上の検証したい要素に合わせ、ソースやスタイルを確認できます。
参考外部サイト：試す価値あり!?進化し続けるFirefox開発ツール

Internet Explorerの場合

画面上で「F12」キーを押し、ツール上の白いカーソルをサイト上の検証したい要素に合わせ、ソースやスタイルを確認できます。
参考外部サイト：Web制作で使いこなしたいIE開発者ツールの最新機能

Safariの場合

画面上で「Ctrl+Alt+I」キー、またはメニューから「開発」→「Webインスペクタを表示」を押し、ツール画面左下の虫眼鏡アイコンをクリックしてから、サイト上の検証したい要素に合わせ、ソースやスタイルを確認できます。
参考外部サイト：Safariのwebインスペクタなど開発者ツールの出し方

いかがでしたでしょうか。
ぜひお試しください！それではまた！