CSSでinputのサイズを変更する方法
inputタグは主にフォームで使われるタグで、お問い合わせフォームなどで文字を入力したり、ボタンとして使われるものです。
htmlのままでも使えますがCSSで装飾するとよりキレイで使いやすくなります。
この記事ではCSSの基本中の基本、サイズ変更について解説します。
目次
CSSを使わないでhtmlだけでinputテキストのサイズを変更する場合
<input type="text" size="10" value="テキスト">
<br>
<br>
<input type="text" size="15" value="テキスト">
inputの属性である「size」を使うことでhtmlだけでもサイズを変更することは可能です。
しかしこの場合、レスポンシブ対応ができていません。
今どきスマホの利用を無視できないので下記から紹介するCSSでサイズ変更する方法を利用しましょう。
CSSでinput type="text"のサイズを変更する場合
<style>
.txt{
display: block;
width: 100%;
padding: 0.5em;
border: 1px solid #999;
box-sizing: border-box;
background: #f2f2f2;
margin: 0.5em 0;
}
</style>
<input type="text" class="txt" value="テキスト">
結論からいうと「width」を利用します。
width:100%にすると横幅いっぱいのサイズにできます。
さらにborderやpaddingを指定すると100%を超えてしまうため、box-sizing: border-boxを指定します。
↓box-sizing: border-box;について詳しくはこちら
CSSでボタンのサイズを変更する場合
<style>
.btn{
display: block;
width: 300px;
padding: 0.5em;
text-align: center;
border: 1px solid #999;
box-sizing: border-box;
background: #f2f2f2;
margin: 0.5em auto;
line-height: 1.5;
}
</style>
<input type="button" class="btn" value="inputボタン">
<button class="btn">button</button>
ボタンのサイズ変更も基本的に同じです。
ボタンの場合横幅いっぱいにすることは少ないのでpx指定にすることになるでしょう。
「input type="button"」も「button」タグも同じデザインにすることができます。
CSSでtextareaのサイズを変更する場合
<style>
.tarea{
display: block;
width: 100%;
padding: 10px;
border: 1px solid #999;
box-sizing: border-box;
background: #f2f2f2;
margin: 0.5em 0;
line-height: 1.5;
height: 6em;
}
</style>
<textarea class="tarea">テキストエリア</textarea>
textareaはお問い合わせ本文など、複数行のテキストを入力できるhtmlです。
input type="text"と基本は同じですが、heightの指定を考える必要があります。
line-heightは行間を指定するCSSです。「line-height:1.5」なら、文字を含めて1.5文字分の高さとなります。
heightを指定するときはこのline-height×行数を指定します。
4行にしたいなら「1.5×4=6」です。
line-heightの場合は「em」を指定しなくてもいいのですが、heightの場合はemを指定します。
「height: 6em」
さらに正確に4行にしたい場合ですが、
「box-sizing: border-box」を指定しているため、paddingとborderの分高さが足りなくなります。
よってpaddingとborderの分を足してあげる必要があります。
「height: calc(6em + 22px)」
まあ、高さはそこまで厳格にする必要はないので、デザイナーからどうしてもと言われた時くらいにしておきましょう。
↓emやcalcって何?というかたはこちら
【まとめ】CSSでinputのサイズを変更する方法
結論:widthを指定する
100%を指定してはみ出さないようにbox-sizing: border-boxも指定しましょう。
以上、CSSでinputのサイズを変更する方法でした。