前回は、検証ツールの要素パネルでHTMLを検証しました。
今回はスタイルパネルを使って、CSSの適用や追加をしてみましょう。 実際のWeb制作/コーディングで、最もよく使う部分です。
適用されているCSSを確認する
練習用Webページの、ヘッダーにある<nav>タグで囲った部分。
ここだけ右に寄っていますよね。
原因を調べてみましょう。
選択ツールを使って、調べたい要素を選びます。
ulタグにマウスカーソルを重ねると、下図のようにカラフルな表示になるはずです。
クリックして選択を確定しましょう。
要素のパネルで、選択した<ul>にハイライトされていればOKです。
その状態で本題の、スタイルのパネルを見てみてください。
一番下にCSSボックスモデルという、四角が重なった図が表示されています。
ここでは要素サイズ、余白（margin, padding ）のサイズを、まとめて確認することができます。
カーソルを重ねると、画面上でどこに該当するかも教えてくれますよ。
こうして見てみると、原因は<ul>タグの左に40pxのpaddingが入っていることだとわかります。
緑色で表示された左側のpadding がなければ、左端の位置が揃いますね。
どこで指定されているCSSかを探す
<ul>タグの左に付けられている、指定した覚えのないpadding 。
どうして付けられているのか（どこで設定されているのか）も、スタイルパネルで確認することができます。
ボックスモデル図よりも少し上にスクロールしてみましょう。
ユーザーエージェント スタイルシートの欄にpadding-inline-start: 40px;という指定がありました。
（※このページの場合、padding-inline-startは左padding（padding-left）と同じです）
ユーザーエージェント スタイルシートは、ブラウザ側がWebページを見やすくするために勝手につけているスタイル指定。
ブラウザがHTMLを見やすくするために設定されているベースのCSSのようなものです。
この機能があるかた<h1>タグで囲うと特大太字になるなど、タグで囲うだけで表示が自動的に変わる要素があるのです。
ありがたい反面、今回のように邪魔になってしまうこともあります。
styleパネルで確認できるようになると「cssファイルで指定していないのに…」と悩む事もなくなりますね。
ブラウザ上でスタイル指定を変更する
原因がわかったら、修正するためのスタイル指定を書きましょう。
もう一度スタイルパネルを見て下さい。
一番上、ulに対してのユーザーエージェント スタイルシート display:blockは無効になっています。
打ち消し線が表示され、無効化されているのは、style.cssでul要素にdisplay:flexを指定しているため。
スタイル指定は上書きすることが出来るのです。
ということは、style.cssで左paddingをゼロにする指定を書けば良さそうです。
先程“ここでのpadding-inline-startは左paddingのこと”と紹介しました。
分かりやすいpadding-leftを使って書きたいのですが、ユーザーエージェントスタイルシートと違う書き方になるので、効かなかったら嫌ですよね。
padding-leftプロパティでも大丈夫か、検証ツールで試してみましょう。
CSSの試し方は簡単。
追加したい部分をクリックして、試したいスタイル指定を入力するだけです。
そうすると「そのスタイル指定があった場合」の表示に変わります。
padding-leftでも、左に揃いましたね。
検証ツール上で行ったCSSの追加・修正もリロードすると消えてしまいます。
style.cssに追記しておきましょう。
スタイルパネルに入力したものは、コピーも可能。 たくさん書いた時は丸ごとコピペすると楽です。
チェックボックスを使ってスタイル指定を無効化
スタイルパネル、ユーザーエージェントスタイルシート以外は各プロパティ横にチェックボックスが表示されます。
チェックを外してあげると、その指定が無い場合の表示を確認できます。
チェックを外した状態でエディタにコピペすると、無効化箇所はコメントアウトされた状態で張り付けられます。便利ですね！
CSSの記述ミスを発見する
選択ツールもしくは要素パネルから、footerを選択してください。
paddingの表示が打ち消され、！マークが出ています。
!マークにカーソルを重ねると、なぜ適用されないかを教えてくれます。
この場合は単位が足りていません。
3remと単位を入れると、!マークが消えてスタイルが適用されます。
