HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのcols属性とは？textarea要素の幅指定方法を実例付きで解説

cols属性とは

HTMLのcols属性は、<textarea>要素と<frameset>要素の両方で使用できる属性です。ただし、<frameset>タグはHTML5では廃止され、現在はサポートされていないため、この記事では<textarea>要素におけるcols属性の使い方を中心に解説します。

cols属性の役割

<textarea>要素のcols属性は、テキストエリアの幅（横幅）を指定するために使用します。colsで設定した値に応じて、テキストエリアの実際の表示幅が決まります。

構文

<textarea cols="num">

上記の「num」には、テキストエリアの幅を文字数単位で指定します。cols属性を省略した場合のデフォルト値は「20」です。

実装例

それでは、<textarea>要素のcols属性を使った具体的なコード例を見てみましょう。面接の質問回答フォームを想定したサンプルです。

<!DOCTYPE html>
<html>
<body>
<h2>Interview Questions</h2>
<p>Why do you want go for the Editor Job Profile? (100 words)</p>
    <textarea rows="6" cols="70" autofocus>
      Write the answer in 100 words only...
    </textarea>
    <p>What are your weaknesses? (50 words)</p>
    <textarea rows="4" cols="70" autofocus>
      Write the answer in 50 words only...
    </textarea>
</body>
</html>

出力結果

HTMLのcols属性とは？textarea要素の幅指定方法を実例付きで解説

補足：rows属性との併用

サンプルコード内で使用しているrows属性は、テキストエリアの高さ（行数）を指定する属性です。rowsとcolsを組み合わせることで、テキストエリアの縦横サイズを自由に調整できます。また、autofocus属性を付与すると、ページの読み込み時に自動的にそのテキストエリアへフォーカスが当たり、ユーザーがすぐに入力を始められるというメリットもあります。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTMLのrows属性とは？textareaの高さ指定方法をわかりやすく解説

    HTMLのrows属性とはHTMLのrows属性は、<textarea>要素の表示される高さ（行数）を指定するための属性です。テキストエリアを画面に表示したときに、何行分の入力欄の高さを確保するかを制御できます。なお、rows属性を指定しない場合の初期値は「2」となっており、多くのブラウザでは2行分の高さで表示されます。基本構文rows属性の基本的な書き方は以下の通りです。<textarea rows=数値></textarea>「数値」の部分に、表示したい行数を半角数字で指定します。例えば「10」と指定すれば、10行分の高さを持つテキストエリアが表示されま