前回は、検証ツールの要素パネルで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のことと思って下さい。
ユーザーエージェント スタイルシートは、ブラウザ側が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と単位を入れると、!マークが消えてスタイルが適用されます。
