CSSインスペクター｜要素のCSS値を検証・表示・コピー

1つの要素のCSSを調べようとDevToolsの要素パネルを開くと、大量のルールが壁のように並んでいます。CSSインスペクターはその逆です。要素を指すだけで、SuperchargeInspectが必要なスタイル、つまりフォント、色、余白を表示します。値を確認したら、クリックするだけでコピーできます。SuperchargeInspectは、DevToolsを開かずに、今見ているページで使えるCSSビューアーの拡張機能です。

CSSインスペクターで確認できる内容

パネルの情報は、タイポグラフィ、色、ボックスの3つのセクションに分かれています。

タイポグラフィ。フォントファミリーは、宣言されたfont-familyのスタックです。パネルにはリストの最初のファミリーが表示され、コピーするとスタック全体がコピーされます。これはページが指定しているフォントです。実際にどのフォントでレンダリングされているかは確認しません。文字サイズ、太さ、行の高さも表示されます。

色。文字色と背景色に加え、ボーダーがある場合はボーダーの色も表示されます。不透明な色は16進数で表示されます。部分的に透明な色はrgba()の値のまま表示され、完全に透明な色はtransparentと表示されます。

ボックス。パディングとマージンは上下左右の4辺すべてが表示されます。パネルにはgap、border-radius、displayが一覧表示されます。ボックスモデル図には、コンテンツを囲むマージン、ボーダー、パディングの各層が示され、コンテンツの幅と高さがCSSピクセルで表示されます。

CSSの値をコピーする

CSSの値は1つずつコピーできます。パネル内のすべての値はボタンになっています。クリックするとその値だけがクリップボードにコピーされるので、padding-topだけ、あるいは文字色だけを貼り付けられます。

まとめて取得したい場合は、「その他のコピー方法」メニューの「テキストのみコピー」を使います。その要素で確認されたスタイルの一覧がすべて含まれます。フォントファミリー、文字サイズ、色、レイアウト、gap、各辺のパディングとマージン、角丸の半径です。

これらは、ページがこの要素に対して算出した計算値です。ただし、フォントファミリーは宣言されたスタックのままです。コピーされる内容には、作成者が書いた元のルール、コンポーネントの定義、元のスタイルシートは含まれません。サイトが書いたコードではなく、目に見えている状態のスナップショットです。

DevToolsとCSSビューアーの違い

ルールを変更する必要がある場合は、Chrome DevToolsが適したツールです。DevToolsでは、スタイルシートを編集し、カスケードをたどり、ある値が別の値より優先される理由を突き止められます。

CSSビューアーの役割はもっと限定的です。読み取りとコピーのためのもので、サイトのルールを書き換えるためのものではありません。DevToolsを使わずにCSSを確認できます。目的の要素を指し、使える値を取得するだけです。下の表で両者を比較しています。

サイト自体のルールを編集・デバッグするならDevToolsを。1つの要素を読み取り、そのスタイルを別のツールに渡すならCSSビューアーを使いましょう。

キーボード操作

マウスに触れずに、すべての操作を行えます。Alt+Shift+Eを押して開始します。矢印キーで前後の要素に移動します。Ctrl+UpまたはCtrl+Downで親要素または子要素に移動します。macOSではOption+UpとOption+Downを使います。

Enterを押すと、選択中の要素をロックします。もう一度Enterを押してメモを書き、Ctrl+Enter（macOSではCmd+Enter）で「参照をコピー」します。Escを押すと要素の選択に戻るか、パネルを閉じます。?を押せば、いつでもすべてのショートカットの一覧シートを開けます。

すべてがデバイス内で完結

SuperchargeInspectはローカルで動作します。ネットワーク通信は一切行わず、どこにもデータを送信しません。アカウントは不要で、バックグラウンドでデータを収集することもありません。

調べたスタイルがデバイスの外に出ることはありません。外に出る可能性があるのは、あなたが保存を選んだファイルか、他のアプリに貼り付けた値だけです。ブラウザを閉じると、最後に記憶していた要素はクリアされます。

コーディングツールに渡す準備はできましたか？変更すべき要素をAIコーディングツールに正確に伝えましょう。