右端の余白を除去する

CSSのレスポンシブ調整が不調な場合、モバイル表示の右端に原因不明の余白が表示されるケースがあります。
特定の要素が不揃いな場合にはまだ探せるのですが、ネガティブmarginが設定されているケースなどツールで探索しても原因が分からないことがあります。

このような場合に原因を切り分けるには、まずツールとしてChromeデベロッパーツールのモバイルエミュレーションモードを利用すると表示環境を再現できます。
モバイルエミュレーションはdevツールの上ナビにあるモバイル端末のアイコンで切り替え可能です。

余白については、CSSのoverflow: hiddenを指定するとほぼ消えます。ただし、hiddenには副作用もあるため、利用するにしても狭い範囲に指定した方が良いでしょう。

はじめにhtmlやbodyといった外側のタグに指定し、効果があるなら内側のタグにスタイル指定を移していきます。 overflow: hiddenを指定しても余白が残っている場合には、その要素内に原因がないか、または複数の原因があると考えられます。

hiddenの指定要素を変更していき、消去法で絞り込むことによって、最終的に余白を引き起こしている要素を切り分けられます。
要素を特定できたら、overflow: hidden以外のプロパティ変更により解決することも可能でしょう。

⁋ 2021/04/07↻ 2024/12/18