サイト構造を3D化して立体的に表示するFirefoxプラグイン「Tilt 3D」でz-indexの重なり順を確認する
注意！現在、Firefoxプラグイン「Tilt 3D」は使えないようです。
先日、画像が複雑に重なるデザインのコーディングをしたのですが、重なる画像や要素が多く、CSSのz-indexで指定した要素の上下関係が分からなくなってしまいました。
z-indexは要素の重なり順序を指定できるCSSなのですが、z-indexでの指定とHTML文脈の中での重なりの優先順位を理解しないと、なかなか思い通りに表示できないことがあります。（参考：z-index再入門）
z-indexや要素の重なり順序を視覚化して確認できるツールはないかな〜と調べていたら、「Tilt 3D」というFirefoxのプラグインを見つけたのでご紹介します。
Tilt 3Dでできること
Tilt 3Dはサイト構造を3Dで立体的に表示してくれるFirefoxのプラグインです。結構古くから存在するようですが、コーディングや開発時の検証でも役立つかもしれません。
まずはブラウザのFirefoxでTilt 3Dプラグインページへ行き、「Firefoxへ追加」ボタンをクリックしてプラグインをインストールします。インストールをしたら一度ブラウザを再起動させます。
以下の画像はMacの例ですが、Firefoxを立ち上げた状態で上部メニューバーから「ツール > Web開発 > Tilt」をクリックします。
すると、サイトのレイヤー構造が3Dで表示されます。マウスでサイトをグリグリとドラッグするとサイトが回転するので、確認したい箇所がよく見える位置まで動かします。
サイトの色情報が多くて重なりが見にくい時は、以下の画像のように左側にあるツールでレイヤー構造のみ表示させることも可能です。
サイトの要素をダブルクリックすると別ウィンドウでHTMLを表示させることもできるようですが、私の環境ではうまくいきませんでした。とりあえずこのプラグインでz-indexの重なり順が確認できたので助かりました。他にも色々なサイトを見てみると面白そうです！