z-indexマネージャー

z-indexマネージャーは、CSSのz-indexレイヤー階層を設計・ 維持するための無料ブラウザベースツールです。スタイルシート全体に マジックナンバーを散らばす代わりに、すべてのz-indexレイヤーを 一か所で定義し、スタッキング順序を視覧化し、プロジェクトに必要な 形式でクリーンなスケールシステムをエクスポートできます。

z-index値の管理は、CSSバグの最も一般的な原因の一つです。 チームはよく、要素を他の上に強制的に表示するためにランダムな 大きな数値（z-index: 99999）を使用し、保守不可能な状態を 作り出します。このツールは、意図的で構造化されたレイヤーシステムを 定義できるようにすることでこの問題を解決します。

ツールにはBootstrapのz-indexスケール（1000〜1080）、Material UIの エレベーションシステム（1050〜1500）、Tailwindのデフォルトスケール （0〜50）、カスタムリニアスケールなどの人気フレームワーク用の ビルトインプリセットが含まれています。

出力は4つの形式で利用可能です：CSSカスタムプロパティ（変数）、 Sass/SCSSマップ（ヘルパー関数付き）、JavaScriptオブジェクト、 TypeScriptオブジェクト（constアサーションと型エクスポート付き）。

競合検出機能は、z-index値が重複するレイヤーを自動的にハイライト します。視覧的スタックプレビューは、z-index値でソートされた レイヤーを3Dパースペクティブビューで表示します。

すべての処理はブラウザ内で完結します。データがサーバーに送信 されることはありません。px ↔ remコンバーター と組み合わせて包括的なCSS単位管理を行うか、 CSSレイアウトジェネレーターを 使用してFlexboxとGridレイアウトをz-indexシステムと並行して構築 できます。

1. ドロップダウンからz-indexプリセット（Bootstrap、Material UI、Tailwind、Custom Linear）を選択してプリセットを読み込みます。またはゼロから始めます。
2. 名前（例：「modal」）、z-index値（例：1050）を入力し、レイヤーが新しいスタッキングコンテキストを作成する場合は「Stacking ctx」をトグルして、レイヤーを追加します。Addを押すかEnterを押します。
3. レイヤーの名前やz-index値をクリックしてインラインでレイヤーを編集できます。「ctx」ボタンでスタッキングコンテキストのマークを切り替えます。
4. 各レイヤー行の左側のグリップハンドルをドラッグしてレイヤーを並べ替えます。
5. 競合を確認 — ツールは重複するz-index値を持つレイヤーをオレンジで自動的にハイライトします。値を調整して競合を解決します。
6. 視覧的スタックを確認 — スタッキングプレビューですべてのレイヤーがz-index順に3Dパースペクティブビューで表示されます。
7. 希望の出力形式（CSS Variables、Sass/SCSS、JS、TS）を選択し、CopyをクリックするかCtrl+Shift+Cを押して生成されたコードをコピーします。