##環境
ASP.NET MVC5
.NET Framework
##状況
今月からWebアプリの現場に配属された2年目の新人です。
開発未経験&Web系は今の現場が初めてなので、用語の使い方等不適切な部分がある可能性があります。
簡単な不具合対応を任され、原因までは人に聞きつつわかったのですが影響範囲の特定につまずいています。
「やってみたこと」に記載の方法は人から聞いて知った方法なのですが、後述の通り検索結果に問題がありそうで、調査方法としてより適切方法があれば知りたいという状況です。
前提
ある.cssファイル内のクラス名が不適切なため不具合が発生しています。
改修の対応としてcssを修正してクラス名を適切なものにしようとしています。
問題内容
クラス名を修正するとそのクラスを適用しているほかの要素にも影響が及ぶため、影響範囲の調査が必要です。
ただし、htmlファイル自体は動的に作成されているため、単純にソースフォルダにgrepをかけるだけではわからないようです。
(ソースフォルダには.cshtmlというファイルはあり、このファイルからブラウザに表示されるhtmlが生成されていると考えています)
当該の.cssファイルを読み込んでいる画面はわかっています。(画面のレイアウトを作っている.cshtmlファイルがgrepでヒットしたため)
その画面内のどの要素が該当のクラスを適用しているのかを漏れなく調べるには、どうすればいいでしょうか。
やってみたこと
該当の画面をブラウザで表示し、F12を押すと出てくる開発者ツールで検索しました。
問題のクラス名を「.parent .child」とすると、開発者ツールのコンソールで下記コマンドを実行しました。
$('.parent').find('.child')
こうするとコンソール上に、「.parent .child」を適用しているhtml要素が表示されるのですが、
その画面が読み込んでいる別のcssファイルにも同じクラス名があるようで、そちらがヒットしてしまいます。
さらになぜか、ヒットしてほしい要素がヒットしなかったので、影響範囲の調査としては信頼できる方法ではないのかなと思っています。
(開示できる情報が少なく申し訳ないですが、もしこれだけの情報でなぜヒットしなかったのかがわかる方がいれば教えていただきたいです。)
11/30 追記
目的のクラス名がヒットしない問題は、解決しました。開発者ツールの使い方が間違っていたようです。
ただ別の問題が発生したので、以下に新たに質問を投稿しました。
https://teratail.com/questions/307263?modal=q-comp
ご回答いただきたいこと
上記のような状況でCSSの修正をする場合の影響範囲の調査方法を教えてください。
いろいろなやり方があるかと思いますが、漏れなく調査できていることがわかる方法であればどのような方法でも問題ありません。
またできれば、一般的にCSSを修正する際の、影響範囲の調査としてスタンダードな方法があれば、今回の状況で使えるか否かにかかわらず今後のために教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー