初投稿
本記事が初めての投稿になります❗️
はじめに
- 本記事は、備忘録としてまとめたものになります。
- 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
- また記載内容はすべて、正しい内容が記載されているとは限りません。
- 誤った内容を見つけた場合は、ご指摘をお願いいたします。
背景
- 自分のアプリ（ポートフォリオ）へ、Webレスポンシブデザインを適応しようとした時の話。
- 現在、ユーザーはPCブラウザからの利用ではなく、スマホからの利用頻度が高いだろうと考え、実装することにした。
- 実際に自分のアプリに、Webレスポンシブデザインを実装したところ、以下のように要素が重なって表示されてしまう事象が発生した。
環境
OS：MAC
ブラウザ：GoogleChrome
開発言語：Ruby on Rails
サイドバーを表示していない場合
- 特段、画面上は問題なし。
サイドバーを表示した時
- 下側の要素（文字）が表示されてしまい、デザインが崩れた。
調査した結果①（関係がなかった）
- JavaScript上で、それら要素をピンポイントでDOM操作していたので、影響した可能性が浮上。
- GoogleChrome上でJavaScriptを無効化したり、JavaScriptのコードを削除してテスト。
- その結果、デザインが何一つ変わらず、解決につながらなかった。
調査した結果②（こちらが正解だった）
- 「HTML 要素 重なる」でGoogle検索したところ、解決法が見つかった。
- 今回の場合、サイドバーのセレクタに、"z-index: 100;"と宣言することで、解決した。
- 各要素のセレクタが"position: 〜"を採用している場合、重なりの順番を指定しないといけない、ということを理解した。
- また"z-index"は"position: 〜"のセレクタでしか、機能しないということも理解した。
"z-index"を宣言した時
無事にデザインが崩れることなく、実装できた ※画像のデザインをリファクタリングしたため、他の画像とデザインが一部異なります。
