HTMLのテキストエリア（textarea）に表示される行数を設定する方法

HTMLの（テキストエリア）に表示される行数を設定するには、<strong>rows属性</strong>を使用します。rows属性を指定することで、ページ読み込み時にテキストエリア内に表示される行数（高さ）を制御できます。また、<strong>cols属性</strong>と組み合わせれば、幅も同時に調整することが可能です。</p> <h2>サンプルコード</h2> <p>以下のコードは、rows属性を使ってテキストエリアの表示行数を「5行」に設定する例です。実際にブラウザで実行して動作を確認してみてください。</p> <pre class="prettyprint notranslate"><!DOCTYPE html> <html> <head> <title>HTML rows属性の使い方</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> 科目名を入力してください <br /> <textarea rows="5" cols="50" name="description"> </textarea><br> <input type="submit" value="送信" /> </form> </body> </html></pre> <h3>解説のポイント</h3> <ul> <li><strong>rows="5"</strong>：テキストエリアの高さを約5行分に設定します。</li> <li><strong>cols="50"</strong>：1行あたりの文字数（横幅）を指定します。</li> <li>rows属性・cols属性の両方を省略した場合、ブラウザごとのデフォルト値が適用されるため、レイアウトが環境によって変わることがあります。</li> <li>CSSのheightプロパティでも高さを調整できますが、HTMLだけで簡潔に指定したい場合はrows属性が便利です。</li> </ul> </div> <div class="ad5"><script language='javascript' src='/ad/w.js'></script></div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064154.html' >HTMLのiframe要素にsandbox属性で追加のセキュリティ制限を有効にする方法</a> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064156.html' >HTMLで順序付きリスト（ol）の開始番号を設定する方法</a> <i class="next"></i> </div> </div> <section class="bottom-list"> <ol> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063766.html" class="t-over" title="HTMLでテキストの方向を設定する方法【directionプロパティの使い方】"> <span>HTMLでテキストの方向を設定する方法【directionプロパティの使い方】</span> </a> <p class="r-over r-over-3"> HTMLでテキストの表示方向を設定するには、style属性を使用します。style属性は要素にインラインスタイルを指定するための属性で、CSSのdirectionプロパティと組み合わせることで、テキストの流れる方向（左から右／右から左）を制御できます。ただし、style属性で指定したスタイルはインラインスタイルとして扱われるため、<style>タグや外部スタイルシートで定義されたグローバルなスタイルよりも優先される点に注意してください。 directionプロパティに指定できる値番号値と説明 1ltr左から右へ記述する（left to right）。日本語や英語など、ほ </p> </div> </li> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063839.html" class="t-over" title="【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法"> <span>【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法</span> </a> <p class="r-over r-over-3"> HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols </p> </div> </li> </ol> </section> </article> <aside class="box1-r box4-r"> <section class="small-nav"> <ul class="f-between"> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd144y/' target="_self">Cプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/qo145i/' target="_self">C++</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh146b/' target="_self">Redis</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/hf147z/' target="_self">Bashプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/mk148e/' target="_self">Python</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/lj149d/' target="_self">Java</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay150s/' target="_self">データベース</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay151t/' target="_self">HTML</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/pn152h/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh153b/' target="_self">プログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/if154a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig155a/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jg156b/' target="_self">SQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig157b/' target="_self">iOS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/wu158p/' target="_self">Android</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ge159z/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh160b/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ec161w/' target="_self">C#</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd165y/' target="_self">PHP</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig171a/' target="_self">SQL Server</a></li> </ul> </section> <div class="box1-r-list"> <div> <i></i> <span>HTML</span> </div> <ol> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063960.html" class="r-over r-over-2" title="HTMLでテキストエリア（textarea）を表示する方法【属性一覧とサンプルコード付き】">HTMLでテキストエリア（textarea）を表示する方法【属性一覧とサンプルコード付き】</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063978.html" class="r-over r-over-2" title="HTMLのasync属性を使ってスクリプトを非同期に実行する方法">HTMLのasync属性を使ってスクリプトを非同期に実行する方法</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063988.html" class="r-over r-over-2" title="HTMLでテキストエリア（textarea）の表示幅を指定する方法｜cols属性の使い方を解説">HTMLでテキストエリア（textarea）の表示幅を指定する方法｜cols属性の使い方を解説</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001063989.html" class="r-over r-over-2" title="HTMLでテキストの色を変更するには？color属性の使い方とCSSによる代替方法">HTMLでテキストの色を変更するには？color属性の使い方とCSSによる代替方法</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064002.html" class="r-over r-over-2" title="HTMLで要素内のテキストの表示方向を設定する方法">HTMLで要素内のテキストの表示方向を設定する方法</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064004.html" class="r-over r-over-2" title="HTMLでテキストの書字方向を送信する方法｜dirname属性の使い方を解説">HTMLでテキストの書字方向を送信する方法｜dirname属性の使い方を解説</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064063.html" class="r-over r-over-2" title="HTMLでテキストのフォントを設定する方法【CSSを使った現代的な手法】">HTMLでテキストのフォントを設定する方法【CSSを使った現代的な手法】</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064089.html" class="r-over r-over-2" title="HTMLで画像マップの領域座標を設定する方法【coords属性の使い方】">HTMLで画像マップの領域座標を設定する方法【coords属性の使い方】</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064107.html" class="r-over r-over-2" title="HTMLでテキストトラックの種類を指定する方法｜kind属性の使い方とサンプルコード">HTMLでテキストトラックの種類を指定する方法｜kind属性の使い方とサンプルコード</a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064125.html" class="r-over r-over-2" title="HTMLのtrack要素でテキストトラックにタイトル（ラベル）を付ける方法">HTMLのtrack要素でテキストトラックにタイトル（ラベル）を付ける方法</a> </li> </ol> </div> </aside> </section> <footer> <section> <span class="container f-center"> 著作権 © <a href="https://jp.wsxdn.com">https://jp.wsxdn.com</a> 全著作権所有 </span> </section> </footer> </body> </html>