【CSS】スタイルが適用されないときに最初に確認すべき検証ツール3箇所【デバッグ】

CSSで一番多く悩む問題として「CSSのスタイルを要素に当てたはずなのに見た目が変わらない・・・」があります。

そのような状況のとき、検証ツールからスタイルを少し変えてみてはまた戻して・・・とデバッグすることが多いですよね！

でも、そもそもなぜ見た目がうまく適用されないのか？その根本的な原因であるヒントやエラーメッセージが事前に出ていれば、もう少し早く簡単に解決できそうです。
しかし、この「エラーが出ない」というのは、CSSのメリットでもあり、デメリットでもあるのが、またむずかしいところです。

そこで、今回はスタイルが適用されないときに最初に確認すべき検証ツール(Google Chrome)3箇所を紹介します。

使用しているもの

• Google Chrome 126.0.6478.127 (Official Build) (arm64)

検証ツールの準備

• Google Chromeで、開発中のページのタブ(http://localhost:3000/など)を開き、
• ショートカットキー(Windows: Ctrl+Shift+C, Mac: ⌘+⇧+C)を押し、「ページ内の要素を選択して検査」モードにして、
• スタイルがうまく適用されない要素へカーソルをもっていき、クリックする
• 表示された検証ツールのタブは「要素」と「スタイル」を開く

スタイルが適用されないときに最初に確認すべき検証ツール3箇所

１．詳細度の高いCSSに上書きされたことによる取り消し線

• 一番多いパターン。詳細度の高いスタイルに上書きされてしまっていて、要素に適用されていないスタイル(宣言)のプロパティ・値には「取り消し線」が表示される。

【画像の例: あとから定義したCSSスタイルに上書きされている】

２．CSSの仕様に沿っていないことよるヒント

• 薄暗くなった値の右隣に表示されている「インフォメーションアイコン」にマウスホバーすると、ツールチップが表示され、そこにヒントが表示される。

【画像の例: width: fit-content;が適用できなかった場合に表示されたヒント】

display: inline プロパティによって width の適用がブロックされています。
display を inline 以外に設定してみてください。

３．値の誤りによるエラーメッセージ

• プロパティの左隣に表示されている「アラートアイコン」にマウスホバーすると、ツールチップが表示され、そこにメッセージが表示される。

【画像の例: 正しい単位(px)のところを、誤った単位(pz)を使った値width: 80pz;として適用できなかった場合に表示されたメッセージ】

プロパティ値が無効