戦え、エンジニア諸君！！
モーダルが沈むたびに z-index: 9999; を書き足し、 気づけば 2147483647（32bit MAX）まで桁が暴走——
そんな闇のレイヤー戦争に終止符を打つッ！
今日は「いくつまで使う？」問題を
≪仕組み → 各FW慣例 → 設計3パターン → 団長流ベスト≫ で一気に整理だ！
Contents
⚙️ 1. まず “島” を理解せよ
数字の前にスタッキングコンテキスト（島）を忘れるな。
島を跨げば 999999 も無力。 （島の詳細は #4 で解説済 ― リンクも可）
📊 2. 主要フレームワークのデフォルト比較
| FW | ドロップダウン | Modal | Tooltip | 備考 |
|---|---|---|---|---|
| Bootstrap 5 | 1000 | 1050 | 1080 | 桁飛ばし採用 |
| Tailwind CSS | 40 | 50 | 50 | 0–50レンジ |
| Material UI | 1100 | 1300 | 1500 | 100刻み |
学び：「絶対値」は決まっていない。 要は衝突しなければいい＋人間が把握しやすい体系であれば勝ちだ。
🧩 3. レイヤー設計 3 パターン
| パターン | レンジ | 使い所 | メリット/デメリット |
|---|---|---|---|
| A. 0–10 フラグ方式 | 0: ベース, 5: 固定ヘッダ, 10: モーダル | 小規模/LP | 数字が小さく把握◎ / 余白少 |
| B. 0–99 テーマ階層 | 10: メニュー, 20: ドロップ, 90: オーバーレイ | 中規模SPA | 2桁管理しやすい / 大型PJで不足 |
| C. 100桁飛ばし | 100, 200, 900, 1000… | 大規模＋外部Widget | 余裕◎ 衝突回避 / 数字が膨らむ |
▶ 団長推奨：B + 変数管理（次章で詳述）
🛡️ 4. 団長流ベストプラクティス ― 変数で制圧
/* root で一元管理 */
:root{
--z-base: 0;
--z-header: 10;
--z-dropdown: 20;
--z-sticky: 40;
--z-modal: 90;
--z-overlay: 100;
}
/* 使うとき */
.modal{ z-index: var(--z-modal); }
- 可読性UP：命名で役割が一目瞭然
- リファクタ即時：数値をrootで動かすだけ
- 衝突回避：外部ウィジェットは
200+を予約
大型プロジェクトは JSON で管理 → Stylelint で静的チェックがベター。
💥 5. 失敗パターン集（実話）
| 失敗 | 症状 | 対策 |
|---|---|---|
999999 インフレ | 他チームが 1000000 を超えてくる | 変数 or Linter を導入せよ |
| CMS ウィジェット重ね | チャットがモーダルを覆う | 外部Widgetは最後に読み、 島を確認してバッファを切る |
| 同一島で数字衝突 | Sidebar と Popoverが互いに潰し合う | スタッキングコンテキスト分離 ( position: relative; z-index:0) |
🔗 推奨ツール & 書籍
CSS設計完全ガイド ― 保守しやすいCSSの設計と実装入門
レイヤー設計・命名戦略を体系化。変数管理とスタッキング解説も充実！
Amazonで見る
※リンクはアフィリエイトを含みます。
📝 まとめ
z-indexは “数字” より “島” を見ろ。- チーム開発は 変数＋Linter でインフレを封じ込め。
- 桁飛ばし or 0–99 レンジ、どちらでも守るべきは統一ルール！
🔥 団長の喝――レイヤー戦争を鎮めよッ！！
闇雲な 9999 連打に別れを告げ、 設計の刃 でレイヤーを制御せよ。
今日から var(--z-dropdown) を打ち込み、 戦え、エンジニア諸君ッ！UI戦場の層を支配するのは“お前の設計力”だッ！！🔥🔥🔥