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

HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。

size属性の構文

size属性の基本的な記述方法は以下のとおりです。

<tagname size="数値"></tagname>

size属性には、表示したい選択肢の数や文字数を整数で指定します。

HTML size属性の使用例

それでは、実際にsize属性を使用した具体的なコード例を見てみましょう。以下の例では、select要素にsize属性を指定して、複数の選択肢をリスト形式で表示しています。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML size Demo</h1>
<p>好きな科目を選択してください：</p>
<select size="2">
<option value="Physics">物理</option>
<option value="Chemistry">化学</option>
<option value="Biology">生物</option>
<option value="German lang">ドイツ語</option>
<option value="Economics">経済学</option>
</select>
</body>
</html>

出力結果

HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

この例では、size="2"と指定しているため、5つの選択肢のうち2つが同時に表示されるリストボックスになります。残りの選択肢はスクロールして確認できます。size属性を指定しない場合は、通常のドロップダウンリストとして表示されます。

まとめ

size属性は、select要素でリストボックスの表示行数を指定したり、input要素（type="text"など）で入力欄の文字数を指定したりできる便利な属性です。ただし、見た目の細かい制御にはCSSの利用が推奨されているため、レイアウト調整はCSSで行うのが良いでしょう。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性は、input要素またはselect要素にのみ適用できます。基本構文multiple属性の記述方法は以下のとおりです。<tagname multiple></tagname>使用例ここでは、select要素にmultiple属性を指定した実際のコード例を見てみましょう。以下のサンプルでは、好きな科目を複数選択できるセレクトボックスを作成しています。<!DOCTYPE html> <html> <style> body {

  2. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">