# CSSのz-indexの確認や管理を便利にする方法

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

何かと管理が面倒で、ややこしいことになりがちなz-indexですが、今回はそんなz-indexを確認したり管理するのに役立つ情報をまとめておきます。

## Chrome拡張機能：DevTools z-index

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

Chrome拡張機能の[DevTools z-index](https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe)を使うと、z-indexが設定されている要素とその値がリストで表示されます。

インストールするだけで［Elements］に［z-index］タブが追加され、そこから並びと設定されてある値まで分かります。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/05/eyecatch_10-3.jpg)「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示...https://webrandum.net/devtools-z-indexCSSで設定しはじめるとややこしいのがz-index、どの要素にどれだけの値が設定されているのか分からず、「とりあえずz-index:999999;にしておこう」となりがちです。そんな風にその場のノリで設定していると、いつの間にかどんどん値が大きくなって管理が大変になります。今回は現在表示しているページの、どの要素にz-indexがかかっているのか一覧で表示できるChrome拡張機能の「DevTools z-index」について紹介します。DevTools z-indexのインストール「DevTools z-index」はChromeウェブストアからインストールできます。他のChrome...](https://webrandum.net/devtools-z-index)

## Chrome開発者ツール：Layers

Chrome開発者ツールに元から備わっている機能で、ウェブサイト上のz-indexの関係を立体的に確認できます。

使い方は、Chrome開発者ツールを開いて、右上の3点をクリックして［More tools］→［Layers］で新しく「Layers」タブが追加されます。

![「Layers」パネルの表示方法](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_1-14.png)

あとはその「Layers」タブへ移動して、回転アイコンを選択してドラッグすると、サイト上を立体的に見れます。

![サイトを立体的に表示させる方法](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_2-11.png)

`z-index`の値が大きくなるほど、距離は離れるようになっているので、どの要素の上にどの要素が来ているのかも視覚的に分かりやすく確認できます。

## マップで管理する

SCSSのマップ機能を使うと、簡単に`z-index`の管理ができます。

```
// z-indexの並び順
$z-list: (
  header, 
  nav,
  pulldown, 
  child
);

// 関数の定義
@function z($name) {
  @return index($z-map, $name);
}

// 関数の使用例
.header {
  z-index: z(header); // 1
}
.child {
  z-index: z(child); // 4
}
```

マップ内の順番がそのまま`z-index`の値になります。

並びを変えたいときは`$z-list`のマップ内の順を変えるだけで済むので、管理がかなりラクになります。

さらに入れ子などにも対応した管理方法も下記で紹介されています。

[![](https://www.google.com/s2/favicons?domain=qiita.com)Qiita![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fqiita.com%2Fkojika17%2Fitems%2Fb4694e3afe0da97e6335?w=160)Sassを使ったz-indexの管理 - Qiitahttps://qiita.com/kojika17/items/b4694e3afe0da97e6335Sass(SCSS)を使ったz-indexの管理には、Sassy Z-Index Management For Complex Layouts – Smashing Magazine を使っていた。$z: header, nav,...](https://qiita.com/kojika17/items/b4694e3afe0da97e6335)