こんにちは！
今回はデザインからちょっと離れてHTML/CSSのお話を。
HTML/CSSを学びはじめて間もない駆け出しコーダーさん向けの記事です！
早速ですが、コーディングをしていて、
なぜかサイトの右側に謎の空白ができていること、ありませんか？
コーディング中は夢中になっているので気が付かなかったけれど、
やっとの思いで完成したページを最終確認しているとき、なぜか右側に余白があることに気付いてしまった・・・。
縦にスクロールするとき、微妙に右にも振れてしまう😢
CSSの記述を見直してみたけど、どうしてなのか全然わからない〜〜！！！
そしてわからないまま時間は過ぎていき、納期が迫る・・・想像しただけでドキドキしていまいます。。
ベテランのエンジニアさんならきっと、さくっと原因箇所に気が付いて修正できたりするんだろうなぁと思いますが
われわれ超初心者にはそんなことできないですよね！！(笑)
そこで駆け出しコーダー仲間の皆様へとてもシンプルな解決方法をご紹介します。
たいていの場合、何かの要素の幅がはみ出していることがこの現象の原因だと思います。
つまり、「何の要素がはみ出しているのか」がわかれば、あとはwidthを調整するだけです！
そこで一時的に以下のCSSを記述してみてください。
*{
outline: 2px red solid;
}
全ての要素にborder（＝境界線）をつけることで、
「何の要素が」はみだしているのか、すぐにみつけることができます！
たとえば以下のようなイメージ。
原因がわかったら、あとは該当の要素のCSSを見直せばOKです！
width: 100px と書いていたつもりが 1000px になっているとか
pxと%を間違えていたりとか
意外と「こんなことか〜！」みたいなものだったりしますが、自力で解決できると気持ちが良いですよね！
当然ですが、このスタイルは本来不要なものなので
はみ出し部分を見つけて問題が解決したら、必ず削除してから納品することを忘れないように注意しましょう。
デザイン関連の記事の間に、今回のようなHTML/CSSに関する記事もちょこちょこ書いていきますのでまた覗きに来てください！
- 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
- Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
- 開発,DX推進支援サービス スタートアッププラン
