ポートフォリオサイトを更新していたときの出来事です。
もともとポートフォリオサイトのスマホメニュー（ハンバーガーメニュー）は問題なく動いていました。
今回、ポートフォリオから Elementorで作成したサイトのURLに飛べるように公開したのですが、
そのあとからスマホでメニューを操作すると不具合が発生するようになりました。
ハンバーガーメニューを押すとフルスクリーンメニューは表示されるのですが、
閉じることができなくなってしまったのです。
最初はJavaScriptの問題かと思い、検証ツールで確認してみました。
するとクリック時に
hamburger active
というクラスはちゃんと付いていました。
つまり JavaScriptは正常に動いている状態 でした。
では何が原因なのか調べていくと、
原因は CSSの z-index（要素の重なり順） にありました。
フルスクリーンメニューのレイヤーがハンバーガーボタンより上に表示されてしまい、
ボタンが見えていてもクリックがメニューに遮られてしまっていたのです。
そこでレイヤーの順番を整理して
hamburger（ボタン）
header（ヘッダー）
fullscreen-menu（メニュー）
という順番になるように z-index を調整しました。
その結果、スマホメニューも無事に開閉できるようになりました。
Web制作では、機能を追加したときに思わぬところで影響が出ることもあるので、
改めて レイヤー構造（z-index）の大切さ を実感しました。
また今回特に厄介だと感じたのが、PCの検証ツール（スマホ表示）では正常に動作していたのですが、
実際のスマートフォンで確認してみると、改善されなかった点。
今後も、表示や動作のチェックを丁寧に行いながら制作を進めていきたいと思います。
