CSSがうまく効かないときはここを調べる!ChromeデベロッパーツールでCSSの問題を見つける方法

CSSの問題が起きたとき、Chromeのデベロッパーツールを使って効率よく原因を調査する方法について解説します。CSSに苦手意識を持つ人に参考になれば良いと思います。

はじめに

「CSS難しい」というご意見をよく見かけますが、その理由のひとつに、問題発見の難しさがあるのではないかと思います。

この記事では、Google Chromeのデベロッパーツールを使って、問題のあるCSSを特定する方法をご紹介します。

具体的な解決法ではありませんが、この調査方法を知ることで、CSSの問題を解決がより効率的になるはずです。

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

調査したいウェブページの上で右クリックをし、検証をクリックします。

1

ブラウザ内に次のような画面(デベロッパーツール)が表示されます。

2

デベロッパーツールのタブ(前の画像の矢印の箇所)がElementsになっていることを確認してください。

タブの左側にある矢印と□のボタンを押して、確認したい要素を画面内で選択します。

3

デベロッパーツールに表示されているHTML構造の中で、確認したい要素がハイライトされていれば準備は完了です。

4

CSSがうまく効かないときに確認すること

確認したい要素が選択できたら、次の内容を順番に調べます。

セレクターに最終的に当たっている値は何か

CSSを当てたいと思っている要素に対して、最終的に何のスタイルが当たっているかを調べます。

次の画像のタブ Computed を選択します。

5

ここに表示されているのは、ブラウザのデフォルトとかCSSの継承とかいろいろあるけど、最終的に適用されることになったスタイル

まずはここを見て、自分の思った通りのスタイルが要素に当たっているかを調べます。

ここで、意図したスタイルは当たっているのに思い通りに動いていない場合は、「問題の原因は他の要素(たとえば親要素)などにあるかもしれない」とアタリをつけることができます。

フォントファミリーの例

ちなみに、フォントファミリーの場合は少し複雑です。CSSの指定だけでなく、最終的にどのフォントファミリーで表示されているかを、画面最下部のRendered Fontsから確認できます。

たとえば次の画像では、

6

font-family: -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';

という指定に対して、最終的に25文字がローカルから読み込まれたヒラギノ、11文字がローカルから読み込まれたSFであることがわかります。

どこの指定によってその値になったか

次に、要素に当たっているスタイルが、どこの指定によって決められたかを調べます。

調べたいスタイルにマウスホバーして表示される → のアイコンをクリックします。

7

クリックすると、タブがComputedからStylesに移動し、指定の箇所がハイライトされます。

8

この例ではdisplay:blockの指定は、h1要素に直接指定されていて、その指定元はuser agent stylesheet(ブラウザのデフォルトCSS)であることがわかります。

その他にも、font-sizeもブラウザのデフォルトCSSで指定されているが打ち消されている(他の指定によって上書きされている)といったこともわかります。

右上に書かれているのは、指定が書かれているファイルなどです。

  • user agent stylesheet:ブラウザのデフォルトCSS
  • <style>:HTMLのスタイル属性の中に書かれた指定
  • style.css:32:読み込んでいるstyle.cssというファイルの32行目

といったように、原因の箇所を細かく表示してくれます。クリックで該当の箇所に移動してくれる場合もあります。

具体的な指定の内容を確認する

次に、Stylesタブの中身を見ていきます。

このタブの中には、選択した要素に対するスタイルの影響がほとんどすべて表示されていると言えます。

要素に直接指定されたスタイルのほか、親の要素からどんなスタイルを継承しているかなども調べることができます。

9

タブ内の中盤〜下部にあるinherited from ○○○という表示からは、どの要素から、どういった値を継承しているかといった内容を調べることができます。

この中に、書いたはずのCSSの記述が見つからない場合は、セレクターに対してCSSが届いていない何らかの原因があります。

大抵の場合は、セレクターの名前を間違えていたり、入子構造のミスです。誤字脱字チェックをしたり、Sassを使っている場合はSassmeisterなどのオンラインコンバートツールを使って書いている箇所だけをコンパイルし、意図通りのCSSが書けているかを確認します。

この画面では、ひとつひとつのスタイルについて、チェックボックスのON/OFFで付け外しが可能です。

「もしこのスタイルがなかったらどうなるか」といったような観点で気軽にスタイルを付け外しできるので、問題の原因となるスタイルを探す際などに便利です。

次の例では、.wwBBMというクラスに対してメディアクエリ内の指定 font-size: 2rem が適用されていますが、

10

font-size: 2rem の前にあるチェックを外すと、代わりにメディアクエリの指定のない場合の font-size: 1.5rem が適用される様子がわかります。

11

終わりに

難しいと言われることも多いCSSですが、問題解決に必要なのは他の言語と同じく、地道な(細かい)チェックです。

本記事が、皆様のCSSの問題解決の助けになれば嬉しいと思います。

最後までお読みいただきありがとうございました。