ホームへ

html･CSSでinput(テキストボックス)のサイズ(幅)の変更方法

inputのtextつまりテキストボックスは主にフォームで使われる入力項目です。

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

html･CSSでinput(テキストボックス)のサイズ(幅)を変更する方法を解説します。

【htmlだけ】size属性



<input type="text" size="10" value="テキスト">
<br>
<br>
<input type="text" size="15" value="テキスト">

inputの属性である「size」を使うことでhtmlだけでもサイズを変更することは可能です。

しかしこの場合、レスポンシブ対応ができていません。

今どきスマホの利用を無視できないので下記から紹介するCSSでサイズ変更する方法を利用しましょう。

【CSS】widthとpadding

<style>
.txt{
    display: inline-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」でサイズを変更します。

CSS width height【要素の幅と高さを指定】
CSSのwidth（幅）とheight（高さ）の指定について説明します。あわせて注意点、min-width（最小幅）、max-width（最大幅）についても説明します。
この記事を読む

width:100%にすると横幅いっぱいのサイズにできます。

さらにborderやpaddingを指定すると100％を超えてしまうため、box-sizing: border-boxを指定します。

↓box-sizing: border-boxについて詳しくはこちら

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

小さいサイズを用意したいとき

入力の桁数が少ないときなど小さいサイズにしたいときはwidthをem指定し、max-width:100%を指定しましょう。

<style>
.txt3{
    display: inline-block;
    /*コレ*/width: 10em;
    /*コレ*/max-width: 100%;
    padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;
}
</style>
<input type="text" class="txt3" value="テキスト">

emは文字数の指定で、htmlのsize属性に近いものがあります。

max-width:100%を指定することで、外側の幅が狭くはみ出しそうなときは縮ませることができます。

単位をつけたいとき

人 
<style>
.txt4{
    display: inline-block;
    /*コレ*/width: calc(100% - 2em);
    padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;
}
</style>
<input type="text" class="txt4" value="10"> 人

テキストボックスに「display: inline-block」を指定すると文字と横並びできます。

テキストボックスの右に単位を記載します。margin-rightか半角スペースで少し隙間をあけるといいでしょう。

widthを100%にすると単位が下に折り返されてしまいます。

よって単位の文字数分幅を小さくします。

上記の場合は「人」の1文字分と空白分、さらにすこし余裕を持たせて2文字分小さくしています。

「width: calc(100% - 2em)」と指定すると望み通りのサイズになります。

↓emやcalcって何？というかたはこちら

CSSで使う長さの単位【px･em･%･vw･vh/calc】
CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。またそれらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。
この記事を読む

高さを調節したいとき

高さを指定するCSSといえば「height」ですが、テキストボックスの高さを調整する際には不適当です。

line-heightとpaddingで調節しましょう。

<style>
.txt2{
    display: inline-block;
    width: 100%;
    /*コレ*/padding: 1em 0.5em;
    /*コレ*/line-height: 3;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;
}
</style>
<input type="text" class="txt2" value="テキスト">

line-heightは行間を調整するCSSです。単位は不要で、emになります。

「（数値-1）÷2×文字の大きさ」分だけ上下が広がります。

paddingはテキストボックスの線と文字の空間を調整できます。

line-heightは文字をドラッグしたとき反転する部分、paddingは反転されない部分です。

大きな違いはありませんが、少しだけ違います。

複数行にしたいとき

<style>
.tarea{
    display: inline-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)」

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

【まとめ】html･CSSでinputのサイズを変更する方法

【html】size属性

【CSS】width指定

100%を指定してはみ出さないようにbox-sizing: border-boxも指定しましょう。

以上、html･CSSでinput(テキストボックス)のサイズ(幅)を変更する方法でした。

マンガで読める関連記事