Chrome Extension
Style Reader
DevTools に「Style Reader」パネルを追加し、選択した要素のタイポグラフィ・色・余白・角丸などのデザイン設定を、読み取りやすく整形して表示します。デザインの再現や数値の転記に。
Google Chrome（デベロッパーモードでの読み込みが必要です）
DevTools の Elements パネルに追加された Style Reader タブ
Style Reader をダウンロード（.zip）
解凍後、フォルダを Chrome に読み込んで使用します
導入手順
1
上のボタンから zip をダウンロードし、解凍します。
2
Chrome で
chrome://extensions を開きます。
3
右上の「デベロッパーモード」をオンにします。
4
「パッケージ化されていない拡張機能を読み込む」をクリックし、解凍したフォルダを選択します。
5
任意のページで DevTools（
F12）を開き、Elements パネルの右側タブから「Style Reader」を選択。要素をクリックすると整形された値が表示されます。注意事項
※
Chrome Web ストアを経由しないため、読み込み時に「デベロッパーモードの拡張機能」という注意が表示されることがあります。動作に問題はありません。
※
解凍したフォルダは削除・移動しないでください。拡張が無効になります。