[新着] Webテンプレートを仮オープンしました
width は横幅、height は高さを指定するプロパティです。
input、textarea、select要素にこのスタイルを設定すると、フォームの入力欄やボタン、セレクトボックスなどの大きさを指定できます。
textarea {
width: 200px;
height: 10em;
}
| width | 横幅を指定します |
|---|---|
| height | 高さを指定します |
それぞれ 数値+単位(px、他)か %(割合)で指定します。
※デフォルトは auto(自動)です。(例:width: auto)
![]()
これらのプロパティでサイズを指定した場合でも、textareaにはcols属性とrows属性を指定しておかなければなりません。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { width: 50%; }
#example2 { width: 150px; }
select { width: 300px; }
textarea {
width: 300px;
height: 10em;
}
-->
</style>
</head>
<body>
<form method="POST" action="example.cgi">
<p><input type="text" name="demo1" id="example1"></p>
<p><select name="demo2">
<option value="デザイン1">Webサイトデザイン1</option>
<option value="デザイン2">Webサイトデザイン2</option>
<option value="デザイン3">Webサイトデザイン3</option>
</select></p>
<p><textarea name="demo3" cols="50" rows="10"></textarea></p>
<p><input type="submit" value="送信" id="example2"></p>
</form>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません