inputやtextarea要素のwidth:100%が効かない（100%以上になる）問題

カテゴリ：Webサイト

記事の種類：ハマったこと

これまでは装飾はなくデフォルト状態で表示していましたが、色の変更やpaddingなどを調整してかなり見やすくなったと思います。もっと早くやっておけばよかったです。

ちなみに、inputやtextareaのpaddingを増やすとその分だけ幅が増えてしまう（要素全体の幅がwidth+paddingになる）問題が起こりました。調べるとこれは仕様のようで、widthを100%にしていても、paddingの分増えるため、幅が100%以上になってしまい、親領域から入力フォームがはみ出して不格好になってしまいます。

解決策として、box-sizing: border-box;というCSSがあり、これを指定すると要素全体がwidthやheightで指定した幅になるように調整してくれます。非常に助かりました。

box-sizingのデフォルト値はcontent-boxでbox-sizing: border-box;を指定していない場合、要素のコンテンツ領域がwidthの幅となります。したがってpaddingやborder分、textareaがはみ出ているのがわかります。

毎回、ちょっといじると何かのトラブルに遭遇する、Web開発の世界は奥が深いですね。

公開日時：2024年08月25日 14:42:08
最終更新日時：2025年04月24日 10:29:39