山ばっかり行ってて、更新が遅れました。Chrome DevTools（検証ツール）について、今回も引き続きパネルの確認をしていこうと思います🧐

※このブログはキャラクター同士の会話形式で進みます。　→ 登場キャラクター紹介はこちら

Chrome DevTools（検証ツール）の画面構成のおさらい
Stylesパネルについて
1. Stylesタブ
2. Computedタブの３項目の役割
まとめ

Chrome DevTools（検証ツール）の画面構成のおさらい

あるく

今回はSytlesパネルだね。こちらもどういう内容か気になるなぁ。

？？？

オイラも気になるぞ。早く教えてくれ。

ミナ

うんうん、そうだね〜・・・って、あなたダレ？？？

ライ太

ライ太だよ、ライ太！　忘れちゃったのかよ・・😭

ミナ

え！？　あの真っ白なライ太が！？　・・・言われてみれば確かに目元が同じだ。

ゴンさん

ライチョー族は夏は羽が茶色になる。ライ太が衣替えするのは、HTMLをCSSで装飾するのと似たようなもんや。その状況をSytlesパネルで確認できるで。

あるく

なるほどー。StylesパネルはCSSの衣替えを確認する場所ってことか。

AI先生

StylesパネルではHTMLの各要素にどんなCSSが効いているか、リアルタイムで確認・変更できます。では実際に見ていきましょう。

Stylesパネルについて

要素はたくさんありますが、初心者でも使えそうなもの（「Stylesタブ」と「Computedタブ」）を中心に、さらっと紹介していきます。

Stylesタブ

Elementsパネルタブメニューの説明

①タブメニュー

Stylesパネル上段にある主なタブの意味

タブ一覧

タブ名	内容	初心者の使用頻度
Styles	選択中の要素に効いているCSSを一覧表示する。値を書き換えたり、チェックを外してCSSを一時的に無効化したりして確認できる。DevToolsの基本	よく使う
Computed	複数のCSSが重なった結果、最終的に実際に適用されている値だけを表示する。上部のボックスモデル図で余白（margin・padding）の数値も確認できる	よく使う
Layout	FlexboxやGridのレイアウト補助線を表示して、配置を確認できる。
Event Listeners	その要素に設定されているJavaScriptのイベント（clickなど）の一覧を表示する
DOM Breakpoints	要素が変更されたときにJavaScriptの処理を止めて確認する設定（上級者向け）
Properties	その要素がJavaScript上で持っているプロパティの一覧を表示する（上級者向け）
Accessibility	スクリーンリーダー（視覚障害者向けの読み上げソフト）から、その要素がどう見えるかの情報を表示する

まずはこの2つだけ覚えればOK

タブ	使う場面
Styles	原因を探す・その場で試す（CSSの脱着や値の変更）
Computed	結果を確認する（最終的にどの値が効いているか、余白がどこから来ているか）

Stylesパネルアイコン類の説明

② アイコン類

Stylesパネルの上部にある「フィルターバー」のアイコン説明

アイコン類

名前	説明	初心者の使用頻度
フィルター	プロパティ名で絞り込める入力欄。たとえば `color` と入力すると、色に関するプロパティ等が表示される
(.*) 正規表現	フィルターの検索を「正規表現」モードに切り替える。特定のパターンで細かく検索したいとき用（上級者向け）
:hov	マウスを乗せたとき（hover）などの状態を、強制的にONにして確認できる。ボタンのホバー時の色などを、マウスを乗せ続けなくてもチェックできる	よく使う
.cls	選択中の要素のクラスを、画面上で追加・削除できる。クラスを付け外しして見た目の変化を試すときに便利
＋（新しいルールを追加）	新しいCSSルールを書き足して試せる
表示モードの切り替え	サイトがダークモードに対応しているとき、その見え方をその場で切り替えて確認できる。
サイドバーの表示切替	Stylesパネルの表示レイアウトを切り替える。画面が狭いときに表示を整理できる

Stylesパネル CSSの構造部分の説明

③ CSSの構造部分

選択中の要素に効いているCSSが、上から順に並んでいるエリア

1つのルールの読み方

.main-nav {about/:746
margin-bottom: 0 !important;
padding-left: 0 !important;
}

部分	意味
`.main-nav`	セレクタ。このCSSがどの要素に効くかを示す（この場合 class=”main-nav” の要素）
`margin-bottom: 0;`	プロパティ（何を）と値（どうするか）のセット。「下の余白を0にする」という指示
`!important`	他の通常のCSSより優先される特別な指定
`about/:746`	右端の表示。このCSSがどのファイルの何行目に書かれているか。クリックするとSourcesに飛べる

左のチェックボックスで、CSSを一時的に脱着できる

操作	結果	初心者の使用頻度
プロパティの左にマウスを乗せるとチェックボックスが出る	チェックを外すと、そのスタイルだけを一時的に無効にできる	よく使う
チェックを外して見た目を確認	「このスタイルが原因かどうか」を、消して試せる。再読み込みすれば元に戻る	よく使う
値の部分をクリックして書き換え	数字や色をその場で変えて、見た目の変化を試せる（保存はされない）	よく使う

取り消し線は「負けた」ルール

.main-nav { padding-left: 0 !important; } ← 勝ち
ol, ul { padding-left: 40px; } ← 負け（取り消し線）

同じプロパティに複数のルールが当たると、優先度の高い方だけが有効になります。負けたルールには取り消し線が引かれます。
!important や詳細度（ID・クラス・タグなど）の高いルールが優先されます。同じ強さなら後に書かれたものが優先されます。

優先されたルールほど上に表示される

位置	内容
上のほう	優先度が高いルール。自分で書いたCSSや `!important` はここに来やすい
下のほう	優先度が低いルール。`ress.min.css` などのリセットCSS（ブラウザの初期スタイルを打ち消す土台）はここに来る

ミナ

やっぱり内容が多いなぁ。私が使うにはどれから使っていけばいいんだろう・・。

ゴンさん

最初は表示されたセレクタのチェックボックスを付け外しして、変化を確かめるだけでいいで。

あるく

下の「text-align: left;」にチェックがついていると文章が左寄せだけど、チェック外すと中央寄せになるね。

⬇️

ライ太

シンプルでわかりやすいな。カンタンに試せるのもいいじゃないか😁

AI先生

Stylesパネルは変更しても保存されないので、気軽に試せます。まず触ってみることが一番の近道ですよ。

Computedタブの３項目の役割

④ 図形(ボックスモデル)
Stylesタブにも同じ図がありますが、位置づけが違います。Computedのこれは「複数のCSSが計算された最終結果のサイズ」を表示します。margin・border・paddingの実際の数値が一目でわかります。「余白がどこから来てるか」を調べるときの主役です。

⑤ フィルター枠
プロパティを名前で絞り込む検索欄。ここはStylesの②とほぼ同じ役割です。ただ違いが2つあって、Show all(継承されたものも全部表示)と Group(カテゴリ別にまとめる)というチェックボックスが付いています。これはComputedタブ特有です。

⑥ CSSの構造部分
プロパティ名と、その最終的に適用された値がひたすら並ぶエリア。color: rgb(68, 51, 51) のように、計算後の実際の値が出ます。

AI先生

一言でいうとStylesは「レシピ(過程)」、Computedは「完成した料理(結果)」です。