はじめに
謎の余白の対処方法の備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇
🦁 結論 🦁
- Chromeの検証を行って余白にはみ出してる部分を見つけてCSSで修正する。
内容
サイトを作成する上でCSSを使う上で、謎の余白をとの戦いがある。
今回は自分のスマホで閲覧した際に残念な余白との戦いがあったため、対処法を掲載。下記のサイトを見ることで全ての解決につながった。
参考にしたサイト📗
【スマホ】レスポンシブで右側に生じた謎な余白（空白）を消す方法
注意点⚠️
- PC、タブレットでのそれぞれ違うため、メディアクエリを使って切り替えできるようにする。
- Max-widthを活用して大きくなりすぎないように工夫する
- Widthは基本1000pxではなく、100％などで表すといい。