CSSが効かないときは、別の指定を足す前に原因を三つへ分けます。「ファイルが届いていない」「指定が対象に当たらない・上書きされた」「指定は効いているが期待と違う」です。Chrome DevToolsで順に確認します。
表示例
以下のコードを表示すると、文字は紫色になり、枠を含む箱の幅は296pxになります。この結果を出発点に、どの指定が効いているか調べます。
練習用のページ
以下をindex.htmlとして保存します。このページではstyle.cssを読み込みつつ、head内にも同じクラスへの指定を置いています。
<!doctype html><html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSSの原因を調べる</title><link rel="stylesheet" href="style.css">
<style>.card { color: purple; }</style></head>
<body><main class="card"><h1>色と幅を確認する</h1><p>順番に原因を探します。</p></main></body></html>.card { color: blue; width: 240px; padding: 24px; border: 4px solid gray; }1．NetworkでCSSの取得を見る
対象ページで右クリック→検証を開き、Networkを選んだ状態で再読み込みします。CSSファイルを探してRequest URLとStatusを見ます。404なら色の指定ではなく、まずファイル名と置き場所を修正します。キャッシュによって表示が変わるため、必要に応じてDevToolsを開いている間のDisable cacheも使います。
2．Elementsで対象を選ぶ
mainの要素を選び、Stylesで.cardの宣言を見ます。この例では、同じ条件の通常宣言が後から書かれたためpurpleが使われます。打ち消し線は上書きの手がかりですが、すべての原因が詳細度とは限りません。
値の誤字なら警告、メディアクエリなら適用条件を確認します。どのファイルの何行から来た指定かも見てください。
3．Computedで最終値を見る
Computedのcolorを見れば、ブラウザが使用する値を確認できます。ボックスモデルでは内容、padding、border、marginを分けます。上の例ではcontent-boxの枠までの幅は240+24×2+4×2=296pxです。
4．一つだけ変えて再確認する
Styles内で色やbox-sizingを一つだけ変え、結果を見ます。この変更はファイルの保存ではありません。直す場所が分かったら元のCSSを編集して保存し、再読み込みして再現することを確認します。
スマホの確認
Device Toolbarで狭い幅を試せますが、実機の入力・フォント・ブラウザの違いをすべて再現するものではありません。主要なページは実機でも確認します。Lighthouseの点数もAdSense合格の証明ではありません。
参照先の計算は相対パス、優先順位はカスケード、値の仕様を調べる手順はMDNの使い方へ進めます。
参考にした公式資料
この例で確かめたこと
2026年10月10日の再検証では、Chromiumの画面幅320・360・768・1200pxで、横にはみ出さないことを確認しました。あわせて、後から書いたCSSが反映され、箱の幅と文字色が例の指定どおりになることを確認しています。
ほかのブラウザや実機で使う場合は、手元の環境でも確かめてください。
