🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

ASP.NET MVC Framework

ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

Q&A

解決済

1回答

2932閲覧

大規模なwebアプリの改修時に、cssのクラス名を変更する場合の影響範囲の調査方法

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

ASP.NET MVC Framework

ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

1グッド

1クリップ

投稿2020/11/26 14:35

編集2020/11/30 03:15

##環境
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を修正する際の、影響範囲の調査としてスタンダードな方法があれば、今回の状況で使えるか否かにかかわらず今後のために教えていただきたいです。

gpsoft👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/11/26 15:19

.NET Framework か Core どっちですか? そのバージョンは何ですか? .NET 版ですと MVC1 ~ MVC5 があるのですがどれですか?
退会済みユーザー

退会済みユーザー

2020/11/26 17:11 編集

.NET FrameworkのMVC5だと思われます。
退会済みユーザー

退会済みユーザー

2020/11/26 22:44

上記は質問欄を編集して追加情報として追記願います。
退会済みユーザー

退会済みユーザー

2020/11/26 23:08 編集

探すのは「ある.cssファイル内のクラス名」だけでいいのであれば、まず .cshtml を探せば、CSS クラス名がコードに埋め込まれているはずなので、静的なものはほぼ全部見つかると思いますが? クライアントスクリプトで動的に適用される CSS クラスがあるなら .js ファイルを探してはいかが? 想像ですが、質問者さんが ASP.NET がレンダリングした html ソースを探して見つからなかったのは、動的に適用されたものではないかと思います。
退会済みユーザー

退会済みユーザー

2020/11/27 00:08

ありがとうございます。 jsファイルを探してみます。 探し方としては、grepを想定されていますか?デベロッパーツール等を想定されていますか?
退会済みユーザー

退会済みユーザー

2020/11/27 01:04 編集

テキストファイル(.cshtml も .js もソースはテキストファイル)の中の任意の文字列を検索できるツールであればいいと思います。 ブラウザのディベロッパーツールは違うのでは? Visual Studio の検索機能のことを「ディベロッパーツール」と言っているならそれも使えると思います。
退会済みユーザー

退会済みユーザー

2020/11/29 22:44

質問者さん、無言になってしまいましたが、回答したのでそれに対するフィードバックを回答のコメント欄に書いてください。役に立った/立たなかったぐらいはすぐ返せるのでは? 役に立たなかったなら、どこがダメだったか書いてもらえると別の案が出せるかも。
guest

回答1

0

ベストアンサー

質問のコメント欄に書いたことですが、PC が使える環境になりましたので、以下に説明用の画像を追加してまとめて書いておきます

探すのは「ある.cssファイル内のクラス名」だけでいいのであれば、まず .cshtml のソースコードを探してみてください。

以下の画像は Visual Studio 2019 のテンプレートで自動生成した MVC5 アプリの _Layout.cshtml ですが、クラス名がハードコーディングされているのが分かりますか?

イメージ説明

他の .cshtml も同様な形で作られているはずです。なので、全ての .cshtml のソースファイルから目的のクラス名の文字列を探せば、静的なものはほぼ全部見つかると思います。

クライアントスクリプトで動的に適用される CSS クラスもあると思います。想像ですが、質問者さんが ASP.NET がレンダリングした html ソースを探して見つからなかったのは、動的に適用されたものではないかと思います。

例えばフレームワーク組み込みの機能に、ユーザー入力を JavaScript で検証し、検証結果に応じて表示される html 要素に付与される class 属性の設定を切り替えるという機能があります。

具体的には、ValidationSummary の validation-summary-valid と validation-summary-errors、ValidationMessageFor の field-validation-valid と field-validation-error、TextBoxFor / EditorFor の valid と input-validation-error などがあります。

それらのクラス名は .js ファイルにハードコーディングされていますので、.js ファイルを探してみてください。

イメージ説明

スクリプトがインラインで .cshtml ファイルに埋め込まれているケースもあるかもしれませんが、それは .cshtml のソースを検索すれば見つかると思います。

探すためのツールは、テキストファイル(.cshtml も .js もソースはテキストファイル)の中の任意の文字列を検索できるツールであれば何でもいいと思います。

Visual Studio の検索機能のも使えると思います。上の画像を見てください。

投稿2020/11/27 02:24

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/11/30 03:20 編集

遅くなって申し訳ありません。 SurferOnWwwさんのご回答でだいぶ問題点を絞ることができました。 特定のcssが適用されている親要素の子要素に対する(「.parent .child」型の)cssを検索する方法を調べるべきであるようです。特にそれがjsによって生成されたhtmlに適用されている場合、洗い出しの方法がわからなくなります。 その件については本質問とはやや離れてしまうため、別の質問を立てました。(ASP.NETと関係なくなるので) ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問