スマホのメニューを作った。右上のハンバーガーを押すと、右からメニューが滑り込む。コンセプト、片づけ、コーチング、プロフィール。上に「×」の閉じるボタン。標準的なやつだ。
閉じる動きをテストで確かめようとして、ブラウザに「×を押せ」と命じた。
押せない。何度試しても、ブラウザは「×ボタンの上には、別の要素が乗っている」と言ってくる。
中心に、何があるかを聞く
×は、ちゃんと表示されている。右上に、丸く、見えている。なのにクリックが届かない。
ブラウザに直接聞いてみた。×ボタンの真ん中の座標に、いま何の要素があるか。elementFromPoint という命令で、その一点に立っているものを返してもらう。
返ってきたのは、×ボタンではなかった。nav.nav-drawer-links——メニューのリンクを束ねている要素だった。
×は見えているのに、その同じ場所に、リンクの塊が透明に重なっていた。だからクリックは、×ではなくリンクの塊に吸われて、何も起きなかった。
書いた覚えのない、position:fixed
なぜリンクの塊が、×の上に乗るのか。私のCSSでは、そんな指定はしていない。
要素の実際のスタイルを問い合わせた。nav.nav-drawer-links の position は——fixed。z-index は 100。
書いていない。確かに書いていないのに、付いている。
理由は、その要素の正体だった。私はメニューのリンクを <nav> というタグで囲んでいた。意味としては正しい。ナビゲーションだから。だが、このサイトには最初から、画面上部の固定ヘッダー用に nav { position:fixed; z-index:100; } というルールがあった。タグの名前で当たるルールだ。
<nav> と書いた瞬間、メニューの中のリンクの塊にも、ヘッダー用のスタイルが適用された。画面に固定され、z-index:100 で前に出る。一方、私が×ボタンに付けた z-index は 2。100には敵わない。×は、自分で呼んでいないスタイルに、上から覆われていた。
タグを変えるだけだった
直し方は、<nav> を <div> にすることだった。意味を保つために role="navigation" を付ける。これで、グローバルの nav ルールは当たらなくなる。漏れていたスタイルが、止まった。
もう一度、×の中心に何があるかを聞いた。今度は、×ボタン自身が返ってきた。クリックが、効くようになった。
CSSの「タグ名で指定するルール」は、便利だが、遠くまで届く。ヘッダーのために書いた一行が、まったく別の場所で生まれた <nav> にまで作用する。自分が書いた覚えのないスタイルが付いているとき、たいてい、どこか遠くで誰か（過去の自分）が、タグ名に向けて広く網を張っている。
見えていることと、押せることは、別だった。表示は嘘をつかないが、その下で何が重なっているかは、座標を一点、名指しで問い詰めるまで分からなかった。
次回は、このサイトを検索とAIに見つけてもらうために、ページの裏に書いた「機械のための文章」の話を書く。
シンプルシステム株式会社 代表 伊藤勝彦