適用されているCSSを確認・変更する【Chrome検証ツールの使い方入門】

前回は、検証ツールの要素パネルでHTMLを検証しました。

今回はスタイルパネルを使って、CSSの適用や追加をしてみましょう。
実際のWeb制作/コーディングで、最もよく使う部分です。

• 適用されているCSSを確認する
• どこで指定されているCSSかを探す
• ブラウザ上でスタイル指定を変更する
• チェックボックスを使ってスタイル指定を無効化
• CSSの記述ミスを発見する

適用されているCSSを確認する

練習用Webページの、ヘッダーにある<nav>タグで囲った部分。
ここだけ右に寄っていますよね。

原因を調べてみましょう。
選択ツールを使って、調べたい要素を選びます。
ulタグにマウスカーソルを重ねると、カラフルな表示になるはずです。

クリックして選択を確定しましょう。
要素のパネルで、選択した<ul>にハイライトされていればOKです。

その状態で本題の、スタイルのパネルを見てみてください。
一番下にCSSボックスモデルの図が表示されています。

ここでは要素の幅、margin,paddingがどのくらい設定されているかが、まとめて確認することができます。
カーソルを重ねると、画面上でどこに該当するかも教えてくれますよ。

こうして見てみると、原因は<ul>タグの左に40pxのpaddingが入っていることだとわかります。緑色で表示されたpaddingがなければ、左端の位置が揃いますね。

どこで指定されているCSSかを探す

<ul>タグの左に付けられている、指定した覚えのないpadding。
どうして付けられているのか（どこで設定されているのか）も、スタイルパネルで確認することができます。

ボックスモデル図よりも少し上にスクロールしてみましょう。
ユーザーエージェント スタイルシートの欄に「padding-inline-start: 40px;」があるはずです。ここでのpadding-inline-startは左paddingのことと思って下さい。

ユーザーエージェント スタイルシートは、ブラウザ側がWebページを見やすくするために勝手につけているスタイル指定。ブラウザがベースセッティングをしてくれているので<h1>タグで囲うと特大太字になるなど、タグで囲うだけで文字の大きさが自動的に変わるのです。

ありがたい反面、今回のように邪魔になってしまうこともあります。
styleパネルで確認できるようになると「cssファイルで指定していないのに」と悩む事もなくなりますね。

ブラウザ上でスタイル指定を変更する

原因がわかったら、修正するためのスタイル指定を書きましょう。

もう一度スタイルパネルを見て下さい。
一番上のdisplay:blockは無効になっています。

なぜ無効になっているかといえば、style.cssでdisplay:flexを指定しているから。
スタイル指定は上書きすることが出来るのです。

ということは、style.cssでpaddingをゼロにする指定を書けば良さそうです。

先程“ここでのpadding-inline-startは左paddingのこと”と紹介しました。
分かりやすいpadding-leftを使って書きたいのですが、ユーザーエージェントスタイルシートと違う書き方になるので、効かなかったら嫌ですよね。
padding-leftプロパティでも大丈夫か、検証ツールで試してみましょう。

CSSの試し方は簡単。
追加したい部分をクリックして、試したいスタイル指定を入力するだけです。
そうすると「そのスタイル指定があった場合」の表示に変わります。

padding-leftでも、左に揃いましたね。

検証ツール上で行ったCSSの追加・修正もリロードすると消えてしまいます。
style.cssに追記しておきましょう。

スタイルパネルに入力したものは、コピーも可能。
たくさん書いた時は丸ごとコピペすると楽です。

チェックボックスを使ってスタイル指定を無効化

スタイルパネル、ユーザーエージェントスタイルシート以外は各プロパティ横にチェックボックスが表示されます。

チェックを外してあげると、その指定が無い場合の表示を確認できます。

チェックを外した状態でエディタにコピペすると、無効化箇所はコメントアウトされた状態で張り付けられます。便利ですね！

CSSの記述ミスを発見する

選択ツールもしくは要素パネルから、footerを選択してください。
paddingの表示が打ち消され、！マークが出ています。

!マークにカーソルを重ねると、なぜ適用されないかを教えてくれます。

この場合は単位が足りていませんね。
3remと単位を入れると、!マークが消えてスタイルが適用されます。