UI Inspector - ビジュアルCSSエディタ

ブラウザ用ビジュアルCSSエディタ

UI Inspectorで、Web開発とデザインのワークフローを向上させましょう。あらゆるWebページをビジュアルかつリアルタイムで検査、編集、スタイリングできる強力なChrome拡張機能です。DevToolsの複雑さを回避し、ページ上で直接即座に調整できます。

UI Inspectorでできること：

- 要素を検査 — 拡張機能を有効にし、任意の要素をクリックしてその属性を表示。
- 属性を編集 — ビジュアルエディタでスタイルを変更し、リアルタイムで変更を確認。
- タイポグラフィを制御 — フォントファミリー、サイズ、ウェイト、行の高さ、字間を調整。
- レイアウトとスペーシングを設定 — マージン、パディング、表示プロパティ、配置を設定。
- 背景とシャドウを強化 — カスタムカラー、グラデーション、背景ぼかし、シャドウ効果を適用。
- ボーダーをカスタマイズ — ボーダーの幅、スタイル、色、角丸を調整。
- 外観を微調整 — 不透明度、ブレンドモード、回転などのトランスフォームを制御。
- すべての変更を確認 — 更新したすべての要素のリストを一か所で確認。
- CSSをコピー — 変更のコンパイル済みCSSを即座に表示・コピー。

---

UI Inspector PROをアンロック：

- 変更をグローバルに適用 — 感度スライダーを使用して、ページ全体の類似要素にスタイル変更を自動適用。
- スタイルプリセット — 任意の要素を再利用可能なプリセットとして保存し、ワンクリックであらゆるWebサイトに適用。
- Tailwind、SCSS、JSXとしてエクスポート — プロジェクトに必要なコード形式で変更をコピー。
- スクリーンショットをエクスポート — スタイリングした個々の要素の高解像度PNGスクリーンショットをキャプチャ。
- GitHubにエクスポート — デザイン変更をCSSにコンパイルしたGitHub Issueを生成。

---

UI Inspectorは誰のため？

Web開発者：
- フロントエンド開発を加速：要素をその場で編集し、レイアウトやスタイリングの問題を素早く特定・修正。
- CSSデバッグを簡素化：直感的なビジュアルエディタでDevToolsをバイパス。
- 本番環境対応コードをエクスポート：変更をCSS、Tailwind、SCSS、JSXとして直接コードベースにコピー。

Webデザイナー：
- リアルタイムのデザイン検証：ブラウザでデザインを調整・完成させ、ピクセルパーフェクトな実装を保証。
- デザインと開発の橋渡し：本番ページを直接調整して、より効果的にコラボレーション。
- プリセットを保存して再利用：再利用可能なスタイルのライブラリを構築し、プロジェクト全体で一貫して適用。

---

UI Inspectorの使い方

1. 拡張機能を有効化：ブラウザツールバーのUI Inspectorアイコンをクリックするか、Alt/Option + Shift + Iを押す。
2. 要素を検査・編集：任意の要素にホバーして選択し、調整可能なスタイルを即座に表示。
3. スタイルをビジュアルに変更：直感的なインターフェースで、タイポグラフィ、レイアウト、スペーシング、背景、ボーダー、シャドウなどを変更。
4. プリセットを保存・適用：一貫したデザインのためにスタイルプリセットを作成し、あらゆるサイトのあらゆる要素に適用。
5. エクスポートして共有：複数の形式でCSSをコピー、スクリーンショットをキャプチャ、またはGitHub Issueとして変更をエクスポート。

---

インストール

Side Panel APIをサポートするすべてのChromiumブラウザに対応。最良の結果を得るために、ブラウザが必要なすべてのAPIをサポートしていることを確認してください。インストールに問題が発生した場合は、ブラウザを最新バージョンに更新して再度お試しください。