ChromeのデベロッパーツールでCSSのエラーを調査する方法!

CSSのスタイルが効かない場合、文法上のエラーをChromeのデベロッパーツールを開いてすぐに確認することが出来ます。そのやり方を紹介していきます。

コンテンツ [表示]

  1. 1CSSでスタイルが効かない原因を調べたい
  2. 2ChromeのデベロッパーツールでCSSのエラーを調査する方法
  3. 2.1原因を特定する
  4. 2.2文法以外の問題でCSSが効かない場合
  5. 3まとめ

CSSでスタイルが効かない原因を調べたい

Photo byPexels

CSSでスタイルをちゃんと設定しているのに、「ブラウザ上では効かない!」という経験は誰しも一度はしています。

もちろんスタイルが効かない原因は様々ですが、原因の特定の仕方というのは開発する上では重要です。エディター上でスタイルの指定をかえてトライアル&エラーを繰り返すのもいいですが、まずはChromeのデベロッパーツールで文法上でエラーが出てないか検証してみるやり方がおすすめです。

ChromeのデベロッパーツールでCSSのエラーを調査する方法

例として以下のHTMLでfont-sizeのプロパティが効かなくて困っているという状況を考えてみます。

font-sizeが効かない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .sample {
      background-color: black;
      width: 300px;
      height: 300px;
      padding: 20px;
      color: white;
      display: flex;
      font-size: 24p;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class='sample'>
    検証したい要素
  </div>
</body>
</html>

それではChromeのデベロッパーツールで調べていきましょう。

要素の検証
まずはChromeでページを開き、スタイルが効かないという要素を選択しましょう。
CSSが効いていない例
するとElementsのタブで該当の要素にフォーカスされた状態でデベロッパーツールが開きます。

Stylesでは該当要素のスタイルが表示されます。そこでfont-sizeのプロパティに打消し線が引かれているのが確認できます。その部分にカーソルをあわせるとinvalid property valueなどエラーのメッセージが表示されます。

原因を特定する

ディベロッパーツールでCSSのスタイルが効いていない事がわかりましたね。これで

  • 他の要素のスタイルが影響している
  • ネットワークエラーでCSSが読み込めていない
  • キャッシュでCSSが更新されていない
というような原因は除外して考える事ができます。

あとは文法上の問題であれば該当のスタイルの使い方をもう一度調べ、
  • 値の指定が間違っていないか
  • 全角のスペースなどが入っていないか
  • セミコロンは指定されているか
  • 誤字・脱字などは無いか
というポイントをチェックして問題を解決していきましょう。

文法以外の問題でCSSが効かない場合

下記の記事でCSSが効かない場合の対処法をまとめています。よくある問題としてはスタイルの優先順位の問題が多いです。

ぜひ参考にしてみて下さい。

あわせて読みたい
CSSが効かない原因とその対処法を解説!のイメージ
CSSが効かない原因とその対処法を解説!
CSSを更新しても「ブラウザ上でスタイルが効かない!」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。

まとめ

いかがでしたでしょうか。まずは文法エラーを疑ってみるというのは重要で、手軽に自分で出来る最初のステップです。

ぜひやり方をマスターしておきましょう!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次