WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

Chrome拡張機能:DevTools z-index

[z-index]タブ

Chrome拡張機能のDevTools z-indexを使うと、z-indexが設定されている要素とその値がリストで表示されます。

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

Chrome開発者ツール:Layers

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

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

「Layers」パネルの表示方法

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

サイトを立体的に表示させる方法

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のマップ内の順を変えるだけで済むので、管理がかなりラクになります。

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね