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

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

例えば３行とか５行とか１０行とかそういう感じで

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

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

このページの目次

行数指定のポイントは line-height と合わせること
jQueryでテキストエリアを行数指定するには
ここまでのまとめ

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

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

height: 5em;

1	height: 5em;

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

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

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

<!-- ５行にしたいテキストエリア -->
<textarea class="row-5"></textare>

1 2	<!-- ５行にしたいテキストエリア --> <textarea class="row-5"></textare>

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

/** ５行ピッタシに調整 */
.row-5 {
  height: calc( 1.3em * 5 );
  line-height: 1.3;
}

/** ５行ピッタシに調整 */

.row-5 {

height: calc( 1.3em * 5 );

line-height: 1.3;

}

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

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

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

　▼ 高さ５行のテキストエリアの例

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

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

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

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

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

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

<!-- 行指定のテキストエリア -->
<textarea class="row-n"></textarea>
<br>

<!-- 行数を変更するボタン -->
<button id="change-rows-btn">行数変更</button>

<br>

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

.row-n{
  line-height: 1.3;
}

.row-n{

line-height: 1.3;

}

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

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

$(function(){
  /** ボタンが押されたら行数変更 */
  $('#change-rows-btn').on('click', function(){
    var textarea = $('textarea.row-n');
    var lineHeight = textarea.css('line-height');
    lineHeight = lineHeight.replace(/[^-\d\.]/g, '');
    textarea.css({
      height: lineHeight * 5 + 'px'
    });
  });
});

$(function(){

/** ボタンが押されたら行数変更 */

$('#change-rows-btn').on('click', function(){

var textarea = $('textarea.row-n');

var lineHeight = textarea.css('line-height');

lineHeight = lineHeight.replace(/[^-\d\.]/g, '');

textarea.css({

height: lineHeight * 5 + 'px'

});

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

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

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

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

ここまでのまとめ

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

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