レスポンシブのデザインについて

Question

お世話になります。

http://www.marianaocean.work/lptest/baby2018Aug/
上記ページを中央揃えで作成中なのですが、横振れの原因を発見することができません。
ご教授いただけましたら幸いです。

また、それに付随して、水色のボタンの箇所がはみ出ていたのですが、
marginをbox-sizing:boder-box;に変更することで解決しました。
box-sizing:boder-box;の活用が有効な理由を今後の参考にお伺いしたいです。

Accepted Answer

ECマスターズの田中です。

> 上記ページを中央揃えで作成中なのですが、横振れの原因を発見することができません。
> ご教授いただけましたら幸いです。

原因は大きく分けて２つあり、
■画面横幅いっぱい表示した上で、さらに余白を設置している
■小要素の横幅を「画面横幅いっぱい」で設定している
以上の２つを解決していただく形になります。


■画面横幅いっぱい表示した上で、さらに余白を設置している

こちらは、
> box-sizing:border-box;の活用が有効な理由を今後の参考にお伺いしたいです。
にも関連するお話となります。

通常、要素の横幅は、width属性によって決められたあと、
さらにpadding、border、marginを加えて見た目を決定しますので、
widthを100%にした場合、paddingやborder、marginの設定されたぶんだけ
画面からはみ出してしまいます。

これがbox-sizingの初期値である「content-box」の場合の動作なのですが、
これを「border-box」にご変更いただくことで、
padding・borderを加えた横幅を、width属性で設定することができるようになります。
つまり、width:100%;と設定した上で、paddingを自由に変更することができます。
（marginは、従来どおり外側の余白となります）

レスポンシブなページを作るときに非常に便利な設定ですので、
http://phiary.me/css3-box-sizing/
上記ページの図解をご参照いただきながら、
「border-box」の概念を身に着けていただければと思います。

いただいたページの中では、
tsクラス、con2wrpクラス、btnクラス、sectionタグ（.ts, .con2wrp, .btn, section）が
画面いっぱいの横幅に加えてパディングが設定されておりますので、
これらに対して「border-box」をご指定いただきますようお願いします。


■小要素の横幅を「画面横幅いっぱい」で設定している

たとえば、親要素のsectionタグに10pxのパディングが設定された
 の場合、
width属性を 100% に設定すれば、親要素のsectionタグの横幅に合わせて設定できるのですが、
100vw にしてしまうと、画面全体の横幅と同じ横幅になってしまうため、
親要素のパディング、左右合わせて20pxぶんだけ、画面からはみ出してしまいます。

いただいたページの中では、
tsクラス、con2wrpクラス（.ts, .con2wrp）が
小要素にも関わらず100vwと設定されておりましたので、
これらの横幅を「100%」にご変更いただきますようお願いします。
（メディアクエリによる画面横幅別のwidthも、あわせてご確認ください）

Answer

ご丁寧にありがとうございました。
とても参考になりました。