CSSでテキストエリアの高さを行数で指定する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSでテキストエリアの高さを行数で指定する方法をご紹介します。

お問い合わせフォームなどで必ずと言っていいほど使用するテキストエリアですが、要素の高さを行数、例えば３行で指定したい時にみなさんはどうやって実装していますでしょうか。

筆者は今回紹介する方法を知らなかった時は普通に「height:80px」なんていう感じで指定していました。

しかし、その指定方法だと「ピタッ」と高さが３行分にならなかったんです（汗）

困って調べた際に見つけた解決策が今回紹介するcalcメソッドを駆使した方法です。

それでは見ていきましょう！

CSSでテキストエリアの高さを行数で指定してみよう！

今回、テキストエリアの高さを５行分でピタッと指定していきます。

完成イメージはこんな感じです。

↓↓↓

ピタッと５行におさまってますね！

今回のTipsの肝は以下の記述です！

↓↓↓

index.css

height: calc( 1.8em * 5 );
 line-height: 1.8;

↓↓上記コードのポイントはこちら。

・line-heightを数値で指定

・height: calc( line-heightで指定した値 * テキストエリアの希望行数)

3行にしたい場合は、「height: calc( 1.8em * 3 );」と書けば３行になってくれます！

MEMO

line-heightは1.8のように単位を省略して書くと、1.8emや180%と指定した場合と同じ意味になります！

実際にテキストエリアの高さを５行分に指定したサンプルを用意したので５行入力して確かめてみていていただければと思います(^o^)

↓↓↓

神記事ありがとうございました！

目から鱗でした笑

以上、CSSでテキストエリアの高さを行数で指定する方法をご紹介しました。

「ピタッ」とテキストエリアの高さを行数分で指定できたら実に気持ちいいのでぜひお試しあれでやんす(^o^)

最後までご高覧いただきありがとうございました！