CSSでinputのサイズを変更する方法

inputタグは主にフォームで使われるタグで、お問い合わせフォームなどで文字を入力したり、ボタンとして使われるものです。

htmlのままでも使えますがCSSで装飾するとよりキレイで使いやすくなります。

この記事ではCSSの基本中の基本、サイズ変更について解説します。

CSSを使わないでhtmlだけでinputテキストのサイズを変更する場合
CSSでinput type="text"のサイズを変更する場合
CSSでボタンのサイズを変更する場合
CSSでtextareaのサイズを変更する場合
【まとめ】CSSでinputのサイズを変更する方法

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でborderやpaddingを内側に指定する方法

横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。なぜならborder やpaddingはwidthの外側になるから。内側に指定して崩れないようにしたい。そんなときに使えるCSSでborderやpaddingを内側に指定する方法を説明します。

この記事を読む

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)」

まあ、高さはそこまで厳格にする必要はないので、デザイナーからどうしてもと言われた時くらいにしておきましょう。