Style Inspector

## 概要 **Style Inspector** は、Web ページ上の任意の要素を **Alt + クリック**するだけで以下の情報を取得できる Chrome 拡張です。 - 色コード（HEX / RGB / HSL） - フォント情報（font-family / font-size / font-weight） - 取得元の区別（text / EyeDropper / fallback） - 赤枠ハイライトで対象が一目でわかる Web デザインの調査・UI チェック・色合わせなどに最適です。 ## 機能一覧 ### 1. テキストのスタイルを取得 テキストを **Alt + クリック**すると、その文字の - フォント名（1つ目） - サイズ - ウェイト - 文字色（HEX / RGB / HSL） が右下に表示されます。 表示例： S: text F: Noto Sans JP / 16px / 500 C: #333333 rgb(51, 51, 51) hsl(0, 0%, 20%) ### 2. 画像・動画・背景色などの色取得 テキストでない要素を **Alt + クリック**すると、 Chrome の **EyeDropper** が起動し、画面上の任意のピクセルの色を取得できます。 S: EyeDropper C: #e91e63 rgb(233, 30, 99) hsl(340, 82%, 52%) ### 3. 赤枠ハイライト Alt + クリックした要素には **赤枠のアウトライン** を付け、 どの要素を検査したかを即座に判別できます。 ### 4. コンパクトな情報パネル 画面右下に **小さな黒いパネル**が表示されます。 検査モード OFF のときは自動で非表示になります。