✏️
開発者ツールの使い方
開発者ツールのどこを、どのように使い、何がわかるのか、の備忘録です。
1. 要素のCSSを確認する（どのクラスが効いてるか？）
-
ショートカットキー：
Ctrl + Shift + C（または左上のアイコンをクリック） -
操作： 対象の要素をクリックすると、その要素が
Elementsタブで選択され、どのクラスが効いているか確認できる -
主に使う場所：
Elementsタブ →Stylesパネル
2. スマホ表示をプレビューする（レスポンシブの確認）
-
ショートカットキー：
Ctrl + Shift + M（または左上のスマホアイコンをクリック） - 操作： 上部でデバイスを選んだり、「Responsive」を選んで画面サイズを自由に変更できる
- 用途： スマホ／タブレットの表示やレイアウト崩れのチェック
3. Styles パネル（スタイル確認・編集）
-
場所：
Elementsタブの右下 -
できること：
- 現在の要素に適用されているCSSルールを確認
- 一部を無効化（チェックボックスオフ）したり、リアルタイムで値を編集して見た目を調整
4. Computed パネル（最終的に適用されたスタイル）
-
場所：
Elementsタブの右下 →Stylesの隣にあるComputedタブをクリック -
用途：
- 「この余白どこから来てる？」を調べたいときに便利
- 値の右側をクリックすると、その値の元になったCSSの場所にジャンプ
5. Box Model 表示（視覚的に余白を確認）
-
場所：
Computedパネルの下部 -
用途：
margin/padding/border/contentのサイズと位置関係を視覚で確認
6. :hov パネル（疑似クラスの確認）
-
場所：
Stylesパネルの上にある「:hov」をクリック -
用途：
-
:hover,:focus,:activeなどの状態を手動でオンにして確認できる
-
Discussion