z-index スケール

このツールでできること

• z-index スケールでは、auto、0、10〜50、modal 1000、toast 9999 の z-index 値を固定表で確認できます。
• 関連する観点として z-index スケール、z-index scale、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列で auto、数値段階、modal、toast のラベルを確認します。
2. Content 列で実際に使う z-index 値を読み取ります。
3. 通常レイヤーは 10〜50、全面 UI は modal 1000、通知は toast 9999 のように候補を分けます。
4. 選んだ値を CSS 宣言にしたい場合は CSS z-index ヘルパーで `z-index: n;` に変換します。

入力例・出力例

よくある利用シーン

• プロジェクト内で z-index の値を 10 刻みと例外値に整理したいとき。
• モーダルやトーストが通常レイヤーより前に出るかを表で確認するとき。
• 任意の大きな数を増やし続ける前に、共有スケールの候補を決めるとき。
• CSS z-index ヘルパーへ渡す値を先に選ぶとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• z-index スケール、z-index scale、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• z-index スケールの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール