テキスト入力欄をブラウザの高さ全体に広げて表示する方法

複数行の長文を入力させる目的で掲載するテキストエリア（＝textarea要素で作る文章入力欄）では、縦横サイズをブラウザの全画面にまで広げて表示させたい場合があります。

HTMLのtextarea要素に対してCSSで縦横サイズを指定すれば良いわけですが、横幅(width)には値「100%」を指定すれば良いものの、高さ(height)の値も同様の「100%」にするわけにはいきません。％記号を使った指定は、親要素(包含ブロック)の大きさに対する割合を示すのであって、画面サイズ(ブラウザの描画領域サイズ)に対する割合を示すわけではないからです。

しかし、「画面（＝ブラウザの描画領域）の高さ」を示せる単位「vh」(＝Viewport Height)を使ってheight: 100vh;のようにCSSを記述すれば、テキストエリアの高さを簡単にブラウザの高さと合致させられます。例えば下図のようにです。

この方法なら、閲覧者の画面サイズ（ブラウザのサイズ）がどのようなサイズでも、テキストエリアの高さは常に画面の高さと一致するサイズで表示されます。
CSSのプロパティに値を1つ記述するだけで実現できますから、JavaScriptは不要です。

ブラウザの高さいっぱいに広げるには、heightの値に100%ではなく100vhを指定

まずは、テキストエリアの高さを画面の高さに合致させる（＝ブラウザの描画領域の高さ限界にまで広げる）HTML＋CSSソースをご紹介しておきます。

ここでは、以下のような簡単なHTMLソースがあることを例にします。

<textarea class="sample" placeholder="画面の高さいっぱいに広がる入力欄"></textarea>

複数行のテキスト入力欄を作るtextarea要素に対して、sampleというclass名を付加しているだけです。（なお、placeholder属性は、何も入力されていない状態のときに薄く表示される文字列を指定します。省略しても構いません。）

次に、このclassに対してCSSで装飾を追加しましょう。

「height:100%」ではなく「height:100vh」ならビューポートの高さに合う

CSSもとても簡単で、以下の1行を記述するだけです。単に、テキストエリアの高さ(height)を100vhにするだけです。

.sample {
   height: 100vh;
}

とても簡単です。
とはいえ、他の装飾との兼ね合いによっては、この1行だけだと実際の画面よりも少しだけ広がりすぎてしまう可能性があります。
そこで、次のようにします。

もし余白分だけはみ出すなら「box-sizing:border-box;」も加える

テキストエリアに太い枠線を加えていたり、内側に余白を設ける装飾を加えている場合は、高さを100vhにすると、それらの分だけはみ出してしまいます。なぜなら、標準では「heightの範囲」には「枠線(border)」も「内側の余白(padding)」も含まないからです。
それを防ぐには、box-sizingプロパティを加えて、値border-boxを指定することで「heightの範囲」に「枠線(border)」も「内側の余白(padding)」も含めるように解釈を変更させます。

.sample {
   height: 100vh;
   box-sizing: border-box;
}

これで、はみ出すのを防げます。

縦も横も全面に広げるなら、widthは100％、heightは100vhを指定

実際に表示するテキストエリアでは、高さだけを画面いっぱいに広げるのではなく、横幅も含めて縦横共に全画面に広げたい場合が多いでしょう。

横方向に対して全面に広げる場合は、深く考えることなくwidthプロパティの値に100%を指定すれば問題なさそうです。よほど親要素が特別なレイアウトになっていない限りは。

そこで下記のようにCSSソースを書きます。

.sample {
   width: 100%;    /* 横は100% */
   height: 100vh;  /* 縦は100vh */
   box-sizing: border-box; 
}

この記述なら、

• テキストエリアの横幅は、親要素の横幅いっぱいにまで広がり、
• テキストエリアの高さは、画面(＝ブラウザの描画領域)の高さと同じサイズに広がり

ます。

下図は表示例です。

※上図では、テキストエリアの枠線を少し装飾しています。それについては後述します。

注：横幅(width)に100%ではなく100vwを指定すると、たいてい右側にはみ出してしまう

▼注意1：

ここで、横幅(width)の値に100%ではなく100vw(＝Viewport Width)を指定すると、（たいていは）横方向にはみ出てしまいますので注意して下さい。はみ出してしまう原因は、例えば以下のような点です。

• スクロールバーが表示されている
  ➡「100vw」の指定はビューポートの幅を指しますが、それにはスクロールバーの幅も含まれるので、スクロールバーが表示されている状況でwidth: 100vw;と指定されたボックスがあれば、スクロールバーの横幅分だけはみ出ることになります。
• body要素などに余白が設定されている
  ➡「100vw」の指定はビューポートの幅を指しますから、body要素などの上位の要素にmarginやpaddingなどの余白が設定されている状況なら、その内側のボックスにwidth: 100vw;を指定すると、余白の分量だけ右方向にはみ出てしまいます。

なので、余白が一切なく、スクロールバーも表示されていない状況でなら、横幅をwidth: 100vw;を指定するとぴったり画面幅に合致するサイズで描画されます。
しかし、そんなことをしなくても、単純にwidth: 100%;のようにパーセントを使って指定した方がよほど簡単で分かりやすいでしょう。

というわけで、横方向は、画面サイズではなく親要素のサイズに合致するように「100%」を指定しておくのが楽です。

▼注意2：

単位「vw」と「vh」を混同しないように注意して下さい。

• vw＝Viewport Width で、ビューポートの横幅のこと。
• vh＝Viewport Heightで、ビューポートの高さのこと。

したがって、width: 100vh;やheight: 100vw;と書いてしまうと、たいていは意図しない描画になるでしょう。

テキストエリアを縦横全面に広げるHTML＋CSSソース

これまでにご紹介した画面表示例のように、枠線や余白などの装飾も含めて「全画面に広がるテキストエリア」を作るHTML＋CSSソースをご紹介しておきます。

HTMLソース

まず、HTMLソースは以下のように2行を記述します。1行目にはリンクがあるだけで、テキストエリアを作っているのは2行目です。

<a href="#target">■テキストエリア：</a><br>
<textarea id="target" placeholder="画面の高さいっぱいに広がる入力欄"></textarea>

※ここではtextarea要素に、id属性ではなくclass属性を使って「target」という名前を加えています。class属性を使っても問題ないのですが、ここでは「ページ内リンク」として機能させたいのでid属性を使いました。

テキストエリアの前に「そのテキストエリアの位置へ移動できるリンク」を用意しています。
このようなリンクがあると、テキストエリアの表示開始位置ぴったりにスクロールできるため、ブラウザのウインドウとテキストエリアの表示位置をぴったり合わせられるからです。詳しくは後述の動作例をご覧下さい。

テキストエリアを縦横全面に広げて、入力欄を装飾するCSSソース

次に、CSSソースを以下のように記述します。
2行目と3行目がテキストエリアを全画面に広げる指定です。
枠線を引いたり、テキストエリアの内側に余白を設ける場合には、4行目の記述も書いておく必要があります。
この2～4行目をセットで必須の記述と考えておけば楽で良さそうな気がします。

#target {
   width: 100%;    /* 横は100% */
   height: 100vh;  /* 縦は100vh */
   box-sizing: border-box;  /* 縦横サイズに枠線まで含める指定 */

   border: 2px solid #0a0;  /* 枠線 */
   border-radius: 0.67em;   /* 角丸 */
   padding: 0.5em;          /* 内側の余白量 */
   background-color: #fff;  /* 背景色 */
}

6～9行目は、枠線を引いたり、枠線を角丸にしたり、内側に余白を設けたり、背景を真っ白にしたりする指定です。好みに応じて何でも装飾して下さい。

ブラウザの横幅＋高さ全面に広がったテキストエリアの表示例

上記のHTML＋CSSソースを実際に表示させると、以下のように見えます。
先頭にある「テキストエリア」というテキストリンクをクリックすると、テキストエリアぴったりの位置にスクロールできます。試してみて下さい。

上記の動作サンプルは、以下のように動作するはずです。

• テキストエリアの高さはブラウザの描画空間の高さに合致する。（横幅は、親要素の描画領域の幅に一致する）
• テキストエリアの前にあるリンクがクリックされたら、テキストエリアぴったりの位置にスクロールできる。
• ユーザがブラウザのウインドウサイズを変更すると、それに合わせてテキストエリアの面積も変化し、常に画面いっぱいのサイズで表示される。

以上、テキスト入力欄の高さを画面(ブラウザ)の高さ100％に合わせるCSSには、単位vhを使って「100vh」を指定すると楽だという話でした。

なお、CSSで長さに使える単位「vh」は、現在ではほぼ「どんなブラウザでも表示できる」と考えて差し支えないでしょう。具体的には、IE9以降、Edge、Firefox19以降、Chrome20以降、Safari6以降、Opera20以降で使えます。

ぜひ、使ってみて下さい。

※画面全体に横スクロールバーが表示される状況では、100vhを指定する方法だと、スクロールバーのサイズ分だけはみ出してしまいます。それを避けるには、JavaScriptを使って「スクロールバーのサイズを含まない画面の高さ」を得ると良いでしょう。その方法は、別途JavaScript Tipsコーナーの記事「ボックスの高さを、スクロールバーを含まない全画面(または画面半分)にぴったり合わせるJavaScript」で解説しましたのでご参照下さい。

(更新日：2020年08月02日)