# 「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示させる

URL: https://webrandum.net/devtools-z-index/
公開日: 2020-05-21
更新日: 2020-05-16
カテゴリー: コーディング
タグ: Chrome拡張機能, Google Chrome
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

- 「[DevTools z-index](https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe)」をインストールすると、開発者ツールの［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](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_1-13-1024x667.png)

[![](https://www.google.com/s2/favicons?domain=chrome.google.com)chrome.google.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/0d166c8741109553d44d4d8e02a5f58900bfea1ca7b533e984f4518e5438bae4.webp)DevTools z-indexhttps://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoePrint all elements with z-index sorted by that number.](https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe)

「DevTools z-index」はChromeウェブストアからインストールできます。

他のChrome拡張機能と違って、画面右上にアイコンは追加されないので注意が必要です。

（追加されている場合は右クリックから非表示にできます）

## DevTools z-indexの使い方

インストールすると、開発者ツールの［Elements］タブ内の、［Styles］や［Computed］などが並んでいるタブ内に［z-index］が追加されます。

追加されている［z-index］タブをクリックすると、`z-index`の値と要素の一覧が、値の大きい順に並んでいます。

![［z-index］タブ](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_2-10-1024x557.png)

要素をクリックすれば、その要素が選択できるようになっているので、どの部分のコードかもすぐに分かります。

![z-indexタブ内の要素クリック時の挙動](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_3-7-1024x557.png)

他の人が書いたコードを触るときなんかも、一度これで確認して現状がどうなっているか確認するといいですね。