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

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

「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

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

他のChrome拡張機能と違って、画面右上にアイコンは追加されないので注意が必要です。
(追加されている場合は右クリックから非表示にできます)

DevTools z-indexの使い方

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

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

[z-index]タブ

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

z-indexタブ内の要素クリック時の挙動

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね