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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

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

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

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

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

完成イメージ

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

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

↓↓↓

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

ピタッと5行におさまってますね!

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 );」と書けば3行になってくれます!

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

サンプルコード

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

↓↓↓

See the Pen
テキストエリア高さ指定
by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

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

目から鱗でした笑

参考 【CSS】テキストエリアの高さを行数で指定する本当に正しい方法PisukeCode - Web開発まとめ

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です