form画面のinput type=”text”などで、指定した範囲から幅がはみ出たりした時の対処法。
空白を指定する「padding」、枠線を指定する「border」のCSS。
これらはよく使うのだけど。
テキストフォーム等でこの指定をすると、場合により、はみ出てしまう。
例えばこんな感じ。
HTML
<form action="">
<input type="text" placeholder="検索" value="" />
<input type="submit" value="Search" />
</form>
<input type="text" placeholder="検索" value="" />
<input type="submit" value="Search" />
</form>
CSS
form {
width:200px;
}
form input[type=”text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
}
form input[type=”submit”] {
width:100%;
margin:0;
}
width:200px;
}
form input[type=”text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
}
form input[type=”submit”] {
width:100%;
margin:0;
}
テキストフォームのみはみ出ている。
これは、borderの枠2px、paddingの左10pxと右10pxの部分がはみ出しているから。
こんな時は
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
をCSSに追加するとよい。
CSS3から使えるようになったスタイルで、「padding」と「border」を含んだ幅（width）と高さ（height）になる。
CSS
form {
width:200px;
}
form input[type=”text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form input[type=”submit”] {
width:100%;
margin:0;
}
width:200px;
}
form input[type=”text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form input[type=”submit”] {
width:100%;
margin:0;
}
今まで、divなどのレイアウトでは、paddingやborderを計算してボックスを作っていたけど、これを使うとかなり便利。
面倒な計算しなくてもいいんですよ。
IE7以前ではサポートされないので、古い環境を想定したサイトでは使えないけど。
もうそろそろ、IE7も無くなるだろう…というか、なくなって欲しいです。
初めての方へ