CSS Stacking Inspector — z-index とスタッキングコンテキストをツリーで可視化【Windows】
- ダウンロード商品¥ 500
CSSコードを貼り付けるだけで、z-index とスタッキングコンテキストをインデントツリーで一覧表示。どの要素がスタッキングコンテキストを生成しているか(position+z-index / opacity / transform / filter 等)を理由付きで表示し、同一コンテキスト内で z-index が重複している競合箇所を ⚠ でハイライトします。 【主な機能】 ✓ CSSコードからセレクター・z-index・positionを自動抽出 ✓ スタッキングコンテキスト生成条件を検出(position+z-index / opacity / transform / filter / will-change) ✓ 要素をインデントツリーで表示(親子関係を可視化) ✓ 各要素に生成理由をラベル表示 ✓ 同一コンテキスト内 z-index 競合を ⚠ でハイライト ✓ サンプルCSS読み込み・結果クリップボードコピー 【デスクトップ版限定機能】 ・ CSSファイルをドラッグ&ドロップして直接読み込み ・ 解析結果をJSONファイルにエクスポート 【動作環境】 Windows 10 / 11(64ビット) 【インストール方法】 ZIPを解凍し、インストーラー(.exe)を実行してください。 制作: KOMA お問い合わせ: koma.games26@gmail.com
CSSコードを貼り付けるだけで、z-index とスタッキングコンテキストをインデントツリーで一覧表示。どの要素がスタッキングコンテキストを生成しているか(position+z-index / opacity / transform / filter 等)を理由付きで表示し、同一コンテキスト内で z-index が重複している競合箇所を ⚠ でハイライトします。
【主な機能】
✓ CSSコードからセレクター・z-index・positionを自動抽出
✓ スタッキングコンテキスト生成条件を検出(position+z-index / opacity / transform / filter / will-change)
✓ 要素をインデントツリーで表示(親子関係を可視化)
✓ 各要素に生成理由をラベル表示
✓ 同一コンテキスト内 z-index 競合を ⚠ でハイライト
✓ サンプルCSS読み込み・結果クリップボードコピー
【デスクトップ版限定機能】
・ CSSファイルをドラッグ&ドロップして直接読み込み
・ 解析結果をJSONファイルにエクスポート
【動作環境】
Windows 10 / 11(64ビット)
【インストール方法】
ZIPを解凍し、インストーラー(.exe)を実行してください。
制作: KOMA
お問い合わせ: koma.games26@gmail.com

