入力欄やボタンのサイズを指定する

[新着] Webテンプレートを仮オープンしました


width: ***; height: ***;

ブラウザ
Internet Explorer Netscape6 Firefox Opera
参考
書式基本 要素名 クラス ID

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>

これをブラウザで見ると次のように表示されます

※サンプルのため送信できません



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版