「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示させる
この記事の要約
- 「DevTools z-index」をインストールすると、開発者ツールの［Elements］内に［z-index］タブが追加される
- z-indexの値が大きい順に一覧で表示されるので、z-indexが現状どうなっているか知りたいときに便利
CSSで設定しはじめるとややこしいのがz-index、どの要素にどれだけの値が設定されているのか分からず、「とりあえずz-index:999999;にしておこう」となりがちです。
そんな風にその場のノリで設定していると、いつの間にかどんどん値が大きくなって管理が大変になります。
今回は現在表示しているページの、どの要素にz-indexがかかっているのか一覧で表示できるChrome拡張機能の「DevTools z-index」について紹介します。
DevTools z-indexのインストール
「DevTools z-index」はChromeウェブストアからインストールできます。
他のChrome拡張機能と違って、画面右上にアイコンは追加されないので注意が必要です。
（追加されている場合は右クリックから非表示にできます）
DevTools z-indexの使い方
インストールすると、開発者ツールの［Elements］タブ内の、［Styles］や［Computed］などが並んでいるタブ内に［z-index］が追加されます。
追加されている［z-index］タブをクリックすると、z-indexの値と要素の一覧が、値の大きい順に並んでいます。
要素をクリックすれば、その要素が選択できるようになっているので、どの部分のコードかもすぐに分かります。
他の人が書いたコードを触るときなんかも、一度これで確認して現状がどうなっているか確認するといいですね。
