chromeデベロッパーツールのstyleが編集できない理由を教えてください。

Question

chromeのデベロッパーツールでstyleを変更したいと思っても時々、styleの文字が斜体になっていてチェックボックスが表示されず編集ができない時があります。

同じbodyでも編集できるサイトと編集できないサイトがありますが、それはどのような場合に編集できないのかが疑問に思っています。

こちらの現象がわかる方がおられましたら、教えていただければ幸いです。

Comments

[m.ts10806]

実際の画面キャプチャやコードなどご提示ください。

[m.ts10806]

あぁー・・理解しました。

Answer 1

styleの文字が斜体になっていてチェックボックスが表示されず編集ができない時があります。

その枠の右上の方に「user agent stylesheet」と書いてあるかと思いますが、書いての通りこれはブラウザ組み込みのスタイルシートです。

ブラウザでかかっているデフォルトにDeveloper Toolsから上書きしたい場合、いちばん上の「element.style」に書き込む、あるいはセレクタ指定で新しいスタイルを作りたい場合は最上部の「+」で新しいCSS記載欄を出現させる、などで対応できるかと思います。

Comments

[parent]

ありがとうございます！

また対処法まで教えていただき、大変感謝いたします＞＜

Answer 2

teratailでいえば下記のようなものでしょうか。

雑に説明すると「ブラウザが勝手に追加するCSS」ということになります。

• 意外と知らないCSSカスケード（2）ユーザーエージェント（UA）CSS

[user agent stylesheet]で調べてみてください。
解説もありますし、打ち消しかたとかも見つかります。

Comments

[parent]

早速ありがとうございます！

はい！そのような状態です！
簡潔にわかりやすく教えていただき、ありがとうございます。

時々、class名が付いているのに斜体になっている状態があったのですがそのような事はありえないでしょうか？

もしかすると私の見間違いかもしれませんが。。。

[m.ts10806]

＞時々、class名が付いているのに斜体になっている状態
例示されないと何とも言えません。私は見たことがないですが・・

[parent]

ありがとうございます^^

またそのような状況になりましたらキャプチャを貼らせていただくかもしれませんが、お手すきでしたらご確認いただけますと幸いです＞＜