テキストエリアの高さを行数で指定する本当に正しい方法

テキストエリアの高さを行数で指定したいことってありますよね。

例えば3行とか5行とか10行とかそういう感じで

ただし、普通にテキストエリアに  height: 5em;  とか height: 10em;  とか指定しても上手くはいきません。本当に行数ピッタリにするには少しだけ工夫が必要です。

ということでCSSでテキストエリアの高さを行数指定する方法をまとめました。またCSSでなくjQueryで動的に指定するやり方についても紹介します。

行数指定のポイントは line-height と合わせること

冒頭で書いたようにテキストエリアを5行にしたいからと言って、

みたいに書いても微妙に5行より小さい高さになってしまい、5行ピッタリにはなりません。

なぜなら見た目の行数というのは line-height プロパティ(行の高さ)に依存しているためです。なので行数ピッタリにするには line-height  を考慮した書き方をする必要があります。

 

例えば次のようなテキストエリアがあるとしましょう。

このテキストエリア高さを5行ピッタリにしたい場合、適用すべきCSSは次の通り

ポイントは line-height  を明示的に指定してることです。ここでは line-height: 1.3  と指定してるので、行高さは 1.3em ( 130%  )の大きさになります。

あとはheightプロパティに calc( 1.3em * 5 )  で5行分の高さを計算して渡してあげればOKです。

 

これでテキストエリアが行間も含めて5行の高さになります。

 ▼ 高さ5行のテキストエリアの例
表示行数を5行にしたテキストエリアの例

上の画像みたいに入力したとき行数ピッタリになると見栄えいいですよね。下手にピクセル指定するより見た目的にきれいになります。

jQueryでテキストエリアを行数指定するには

ちなみにCSSではなくjQueryで動的にテキストエリアの行数を指定する、なんてことも可能です。

ただし、jQueryでは幅とか高さの単位はすべてピクセルとして扱われるので em とか % の単位は使えません。なのでそこらへんに注意して行数指定する必要があります。

そのやり方を自分なりに考えてみると次のような感じです。

 

まず先ほど同様、適当なクラス名が付いたテキストエリア行数変更用のボタンを用意

そして次のようなテキストエリアに行高さ指定するCSSも追加

ここでは行高さを 1.3em ( 130%  ) に指定します。こうしておかないとjQueryで行数指定できないので必ず明示的に指定しておかないといけません。

 

ここまで準備ができたら次のようなjQueryコードを書けばOK

上コードではまず textarea.css('line-height')  で行高さを取得

ただし返ってくる行高さは 17.3px  みたいなピクセル単位付きの値なので、 replaceメソッドを利用して 17.3  のように単位なしの値に変換

あとは css メソッドでheightプロパティに lineHeight * 5 + 'px'  としてピクセル単位で高さを指定すれば5行ピッタリの行数に変更できます。

jQueryではem単位が使えないので全てピクセル換算で行わないといけないことに少し注意です。

ここまでのまとめ

ということでテキストエリアの行数指定について簡単にまとめ

  • height指定だけでは不十分
    例えば5行の高さにしたいからと言って height: 5em;  と指定してしまうのは間違い。5行より少し小さい高さになるので要注意
  • line-height指定も必要
    本当に行数ピッタリにしたいなら line-height プロパティも考慮する必要あり。例えば line-height: 1.3;  と指定したなら height: calc(1.3 * 5);  とすれば5行ピッタシにできる

別にこれはテキストエリアに限った話じゃないです。複数行入力・表示できる要素では line-height を元に行数指定しないと上手くいきません。

以上、テキストエリアに行数指定する方法とCSSコード例についてでした。

CSS

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください