なぜinputがはみ出す・崩れるのか？
初心者がよくつまずく「inputの横幅問題」
HTMLでフォームを作成するとき、input要素にwidth: 100%を指定したのになぜか親要素からはみ出してしまった経験はありませんか？
この現象はCSSの基本的な仕組みを理解していないと原因がわかりにくく、初心者にとって大きなつまずきポイントになります。
See the Pen inputにwidth:100%を設定すると親要素からはみ出る by take it easy (@take-it-easy) on CodePen.
width: 100%でぴったりになると思っていたのに…
多くの人は「100%と指定すれば、親の幅にぴったり合うはず」と思ってしまいがちです。
しかしCSSの初期設定では、幅（width）は中身（content）の幅を意味しており、paddingやborderは含まれません。
そのためwidth: 100%を指定しても、そこにpaddingやborderが加算されてしまい結果として親要素を超えてはみ出したり、ずれたり、レイアウトが崩れることになるのです。
実はborderとpaddingが影響していた！
input要素には、ブラウザが初期状態でpaddingやborderを適用しています。
この部分が追加で幅に加算されることで、見た目が親要素をオーバーしてしまうのです。
box-sizingとは？基本の仕組みを理解しよう
content-boxとborder-boxの違いとは？
CSSのbox-sizingプロパティは、要素の幅と高さに何を含めるかを定義するものです。
content-box（デフォルト）：widthやheightは「コンテンツ部分」のサイズだけを指す。border-box：widthやheightにpaddingとborderも含めたサイズとなる。
つまり、border-boxを使えば「見た目のサイズ＝指定したサイズ」になるので、計算がとても楽になります。
なぜborder-boxが解決策になるのか？
box-sizing: border-box;を指定することで、input要素の幅を100%にしても、paddingやborderを含んだ上で親要素の幅にぴったり収まるようになります。
この一行をCSSに追加するだけで、幅オーバー問題を簡単に解決できます。
inputのはみ出し・ずれを解消するCSSの書き方
最もシンプルな解決コード例
input {
box-sizing: border-box;
}
たったこれだけで、フォームのはみ出しやずれを防ぐことができます。
よくある失敗パターンとその原因
box-sizingを指定していない → デフォルトがcontent-boxのまま- 他のCSSで
paddingやborderが設定されている → 合わせて調整しないと崩れる widthがcalc()やvwで複雑に計算されている → 組み合わせに注意
ベンダープレフィックスは必要？対応ブラウザまとめ
かつては古いブラウザでbox-sizingが標準対応していなかったため、次のようなベンダープレフィックスが必要とされていました。
input {
-webkit-box-sizing: border-box; /* Chrome, Safari（旧） */
-moz-box-sizing: border-box; /* Firefox（旧） */
-ms-box-sizing: border-box; /* Internet Explorer（旧） */
box-sizing: border-box;
}
しかし現在では、主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）はすべてbox-sizingを標準でサポートしており、ベンダープレフィックスは不要です。
シンプルに以下の記述で問題ありません：
input {
box-sizing: border-box;
}
フォーム全体の崩れを防ぐベストプラクティス
他のフォーム要素（textarea, select）にも適用しよう
フォームではinputだけでなくtextareaやselectなどにも同じような問題が起こります。
次のように複数の要素に一括指定するのが便利です。
input, textarea, select {
box-sizing: border-box;
}
CSSリセット・Normalize.cssを使う方法もある
全体的なフォーム崩れを防ぐには、CSSリセットやNormalize.cssの導入も効果的です。
これによりブラウザ間のスタイル差を軽減できます。
まとめ｜CSSの基本を押さえて快適なフォーム設計を
width: 100%でinputがはみ出す原因は、デフォルトのbox-sizing: content-boxにありました。box-sizing: border-box;を指定することで、paddingやborderを含めたぴったりの横幅が実現できます。- 同様の指定は
textareaやselectにも有効で、フォーム全体のデザインを安定させるのに役立ちます。
