【html/CSS】input,textareaの高さ,行間を調整する方法

「テキストボックスの高さを調節したい！」

「テキストエリアの高さを行数指定したい！」

input,textareaの高さ,行間を調整する方法を解説します。

【input】paddingとline-height

テキストボックスにおいて高さはpaddingとline-heightで調整しましょう。

<style>
.example{
    padding: 10px;
    line-height: 1;
}
</style>
<input type="text" value="テキストボックス" class="example">

paddingは線と内側の空白を調整するCSSです。指定した値分上下左右に空白ができます。

paddingについて詳しくはこちら↓

line-heightは行間を調整するCSSです。

指定した数値×文字サイズ分、一行の高さが確保され、その中央に文字が配置されます。

行間について、テキストボックスは1行しか入力できないため、そこまで気にする必要はありません。カーソルを当てたときのカーソルの高さくらいに思っておきましょう。

よってline-heightよりpaddingで調整することをおすすめします。

また、paddingとline-heightで高さが決まるため、heightは指定する必要がありません。

【textarea】heightはemで指定

textareaは高さを行間em×行数で指定しましょう。

textareaテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<style>
.example2{
    padding: 10px;
    line-height: 1.5;
    /*コレ*/height: 4.5em;
}
</style>
<textarea class="example2">textareaテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</textarea>

まず、paddingで線と入力箇所の間に空白を作ります。

textareaは複数行になるためline-heightで行間を指定しましょう。

1.5～2程度がオススメです。

heightは(line-heightの値em)×(行数)で指定します。

上記の場合はline-heightの値が1.5で3行なので「1.5×3」で「4.5」です。

単位は文字サイズを基準とする「em」です。

ちなみにheightはpaddingとborderを除く高さであるため、4.5emで希望通りの高さが取れます。

「box-sizing:border-box」が指定されている場合は外すか「box-sizing:content-box」で上書きしましょう。

身も蓋もないことを言いますが、textareaはユーザーが何行入力するかわかりませんし、右下を引っ張れば変えられるのでheightを丁寧に指定する必要はあまりありません。

入力のしやすさを意識してデザインしましょう。

【まとめ】input,textareaの高さ,行間を調整する方法

テキストボックスの高さはpaddingとline-heightで調整

textareaのheightは(line-heightの値em)×(行数)で指定

以上、input,textareaの高さ,行間を調整する方法でした。