Style Inspector

About

## 概要

**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 のときは自動で非表示になります。