CSSについて

Question

いつもお世話になっております。
本日伺いたい内容なのですが、
レイアウトなどを変更したい箇所があり、ブラウザの検証機能でその要素の名前を見て
変更しようと思ったのですが、いざ変更しようとするとその要素がどのCSSファイルに書かれているのかわかりません。
こういうときはページのソースに表示されているCSSファイルを一つずつ検索していくしかないのでしょうか？
それともなにか一発でファイルを特定する方法などはあるのでしょうか？

Answer

ECマスターズの田中です。

＞なにか一発でファイルを特定する方法などはあるのでしょうか？

はい、特定する方法があります。

たとえば、Chromeの開発者ツールですと、
Elementsタブにて要素を選択した後、
右画面の「Styles」タブにて、
適用されているスタイルの右上に
その定義が記載されているCSSファイルへのリンクが
表示されております。
（添付画像の、赤枠で囲った部分をご参照ください）

このリンクを右クリック→「Copy Link Address」を選択して
該当CSSファイルのURLをコピーしたり、
リンクをWクリックして、「Source」タブ内で開くことにより
直接編集したりすることができます。
（直接編集した内容は、ページを読み込み直すと編集前の内容に戻ります）

他のブラウザの場合でもほぼ同様の操作となりますので、
一度ご確認いただけますでしょうか。###HR######IMG00e0e72ef8750570073d393524bbf13bd.pngIMG0######BR###