CSS @layer Visualizer

CSS @layer Visualizer

CSSカスケードレイヤーの優先順位をドラッグ操作で直感的に理解

━━━━━━━━━━━━━━━━━━━━━━━━

■ 概要

CSS @layer のレイヤー順序をドラッグ＆ドロップで並び替え、優先度バーでリアルタイムに可視化するデスクトップツールです。

@layer 宣言と各レイヤーのCSS雛形を自動生成し、ファイルとして保存できます。

インターネット接続不要。入力データは外部に一切送信されません。

━━━━━━━━━━━━━━━━━━━━━━━━

■ 主な機能

✓ レイヤーをドラッグ＆ドロップで並び替えて優先度を視覚化

✓ 優先度バーで各レイヤーの強さをグラフィカルに確認

✓ @layer 宣言とブロックの CSS を即時生成・コピー

✓ デフォルト5レイヤー（reset / base / components / utilities / overrides）収録

✓ 生成した @layer CSS を .css ファイルとして保存（デスクトップ専用）

✓ レイヤー構成を JSON として保存・読み込み（デスクトップ専用）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 収録ファイル

・ CSS Layer Visualizer_1.0.0_x64-setup.exe（インストーラー版）

・ screenshot-sample.png（スクリーンショット）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 動作環境

・ Windows 10 / 11（64bit）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 注意事項

・初回起動時に Windows スマートスクリーンの警告が出る場合があります。「詳細情報」→「実行」でご利用ください。

・本ツールの使用によって生じた損害について作者は責任を負いません。