tanatiyo 画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。
レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。
↓
すぐさまデベロッパーツールにて検証開始。
↓
すると子要素で親要素からはみ出している箇所が3か所見つかる。
↓
下記参考サイトをさっと確認するも、
よく言われる「width:100%;」と「box-sizing：border-box;」は設定済み。
(border-box;の値はCSSのBASE設定で全要素指定済み)
↓
もう一度下記参考サイトを「丁寧に」見る。
そうすると「margin」についての記載部分が見つかり、じっくり読む。
↓
box-sizing:border-box;とmarginの関係を改めて学習した上で、再度デベロッパーツールで該当箇所をみて調整していくと解決していくことができました。
↓
原因は「width＋margin」の幅がコンテンツを覆う全体の幅になってしまっていたため、このmarginが右側余白を作り出していることが分かりました。
↓
タブレット幅にしても右側余白は出てこなくなりました。
【学んだこと】
理解が曖昧なものを、曖昧に終わらせずチャンスが来たらじっくりと向き合う。理解できていれば次コーディングする時、早く正確にできる。自分から逃げない。起きた問題は「自分を変えるチャンス」。
【参考サイト】
