CSS余白インスペクター：ボックスモデルを確認・コピー

レイアウトがどこかおかしいとき、修正はひとつの要素から始まります。ボタン内側のpaddingが詰まりすぎている、カード周りのmarginが広すぎる。そんなとき、DevToolsをあちこち探さずに数値だけを知りたいはずです。CSS余白インスペクターなら、その手間を省けます。要素にカーソルを合わせるだけで、Boxセクションにボックスモデルが各辺ごとの値つきで表示されます。SuperchargeInspectがその要素ひとつを読み取ります。

CSS余白インスペクターで確認できること

Boxセクションでは、要素のボックスモデルを外側から内側へ、margin、border、padding、コンテンツの順にレイヤーとして描画します。要素の各辺にそれぞれの値があるため、上・右・下・左を個別に読み取れます。

中央には、要素のテキストや子要素が配置されるコンテンツボックスが、CSSピクセル単位の幅×高さで表示されます。コンテンツサイズは整数で表示されます。

図の横には、Gap、Radius、Displayの3つの値も別途表示されます。Radiusはborder-radiusの値です。各値は独立して表示され、クリックするとその値だけをコピーできます。

要素のボックスモデルの見方

以下の表では、要素のボックスモデルの各部分と、余白がおかしいときに調整すべき箇所をまとめています。

図の描画順と同じく、外側から内側へ読んでいきます。

余白の値をコピーする

Boxセクションの値はすべてボタンになっています。上辺のpaddingをクリックすれば、その値だけがコピーされます。gapをクリックすれば、gapだけがコピーされます。一度にひとつの値だけをコピーするので、変更する部分だけを貼り付けられます。

すべての値をまとめてコピーするには、「More ways to copy」メニューを開いて「Copy text only」を選びます。確認したスタイルの一覧がすべて含まれ、paddingとmarginのpx値が上・右・下・左の順に並び、その後にgap、border-radius、displayが続きます。

計測できないもの

読み取れるのは一度にひとつの要素だけです。ルーラー、ガイド、gridやflexのオーバーレイはなく、2つの要素間の距離も計測しません。2つの要素を比べるには、まず1つ目をロックしてpaddingとmarginを控え、矢印キーでもう一方に移動して値を読み取ります。

キーボード操作とプライバシー

Alt+Shift+Eで起動し、矢印キーで要素間を移動します。Ctrl+UpとCtrl+Down（macOSではOption+UpとOption+Down）で親要素や子要素に移動します。親要素に移動すると、どのラッパーが余白を加えているかがわかります。Enterで要素をロックし、Escで選択に戻るかパネルを閉じます。

すべてローカルで動作します。ネットワーク通信は行わず、アカウントも不要なので、検証した内容がどこかへ送信されることはありません。

CSSインスペクター（要素検証）でフォントや色も確認できます。