概要
Webページ上のmargin / padding / gapをpx値ごとに色分けし、フローティングメニューやバッジで直感的に確認できます。
Spacing Paletteは、Webページ上のmargin / padding / gapを瞬時に把握できる、開発者・デザイナー向けの可視化ツールです。 余白確認のたびにDevToolsを開き、スタイルパネルを追いかける日々から解き放ちます。 拡張を有効化するとページ全体のmargin / padding / gapが自動で色分けされ、px数も各オーバーレイ中央へ表示されます。 px値に応じて三つの系統（その他偶数=オレンジ〜赤、8の倍数および4（8pxグリッド準拠）=緑、奇数=青〜紫）で表現されます。 hoverすると同一px以外のオーバーレイが薄くなり、対象の余白が強調されます。 px数バッジは必要に応じてオフにも切り替え可能です。 フローティングメニューにはpxごとのM / P /Gの件数内訳が並びます。リストをhoverすると該当オーバーレイがハイライトされ、クリックすると対象までスクロールします。 対象がすでに画面内に表示されている場合は、バッジがアニメーションして該当箇所を知らせます。 メニューはドラッグや折りたたみが可能で邪魔になりません。 コンテキストメニューからも拡張機能のOn/Off、オーバーレイ表示、バッジ表示を切り替えられ、ページ内のどこからでも呼び出せます。 フロントエンドエンジニア、UIデザイナー、品質管理の現場で、ピクセルパーフェクトな実装を支える必須ツールです。
詳細
- バージョン1.1.1
- 更新:2026年8月22日
- 提供元Kaworu Inoue
- サイズ35.94KiB
- 言語14 言語
- デベロッパー
メール
dev_kwr@icloud.com - 非取引業者このデベロッパーは取引業者として申告していません。EU 加盟国の消費者とこのデベロッパーとの間に締結された契約には、消費者の権利が適用されません。
プライバシー
拡張機能を管理し、組織での使用状況を確認できます
デベロッパーは、お客様のデータを収集または使用しないことを表明しています。
このデベロッパーは、お客様のデータについて以下を宣言しています
- 承認されている以外の用途で第三者に販売しないこと
- アイテムの中心機能と関係のない目的で使用または転送しないこと
- 信用力を判断する目的または融資目的で使用または転送しないこと
