2022年11月2日(水)

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

• 0
• 281
• 390
• 294

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。

たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。

CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。

display: flex;ではないのにFlexboxのプロパティを設定

ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。