Zenn
📝

いま俺たちに必要なのはz-indexの明確な指標だ

2021/07/04に公開
CSS
tech

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。

z-indexの値付けどうしてる?

z-indexの説明は省略しますが、この値は取りうる範囲が膨大[^1]でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。

1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。

W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません）

広告業界では

Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの業界からz-indexの指標が現れました。

IABとは"The Interactive Advertising Bureau"(Wikipedia)という組織で、オンライン広告における技術的標準規格の策定を行う非営利組織とのことです。2つ目はIABによる実際のサンプルです。

3つ目のリンクはAOLのものですが、これはIAB加盟企業のため、偶然似たというより足並みを揃えていると想像します。

指標

（2015年2月11日現在のIAB Z-index Guidelines、最新版は上記リンクを参照のこと）

  • < 0: 背景要素
  • ______0 - ___4999: 主なコンテンツ、標準的な広告
  • ___5000 - 1999999: 拡大する広告 (Expanding Advertising)
  • 2000000 - 2999999: フローティング広告 (Floating Advertising)
  • 3000000 - 3999999: チャットや告知などのポップアップ (Pop-up Elements)
  • 4000000 - 4999999: Non-anchored Floating Elements, Survey recruitment panels(?)
  • 5000000 - 5999999: ドロップダウンUI、サイト内ナビゲーションUI、固定ヘッダや固定フッタなど (Expanding Site Navigation Elements)
  • 6000000+: 画面全体を覆う要素 (Full-page Overlays)

どこまで従うべきか

いきなり桁数がもの凄いことになっていますが、我々がどの程度従うべきかというと、せいぜいポップアップは3000000番台、ドロップダウンは5000000番台辺りでしょうか。

広告業界の指標なんだから従う必要なんてない、という意見も当然起こるでしょうし、全体を覆うつもりで（この指標を知らずに）9999などを指定している設計者もいるかもしれません。

ひとまず今回は「こんな指標も提言されていたんだな」という認識ということで。最後に記事名を声に出して終わります。

現実的な対策

（追記）lessやsassなどの定数宣言が可能なaltCSSで大雑把にレベルを切っておいて（NormalLevelやFloatingLevel, AlertLevelといったもの）もし他のプラグインと競合した場合は、使うプラグインに沿う形で自分のStyleの定数を引き上げ or 引き下げするのが消極的現実解かと思います。譲りあうしかない!

脚注

[^1]: 仕様上ではintegerとして定義されており、負の値の解釈がレガシーなブラウザ実装で不安定なことから、実質-1と1 - 2,147,483,647（符号付き32bit）の整数。

Discussion