サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
legendの位置
- legendの位置は、フォーム(form要素)のlegend要素に
- marginプロパティを指定します。
- [使い方]
- legend{
margin-left: 200px;
}
- [メモ]
- fieldset要素については、こちらをご覧ください。
プロパティ名 | 値 | 説明 |
---|---|---|
margin: | ; |
「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。 auto(自動) |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
margin-bottom: | 30px; | 下のマージン(余白)を指定します。 |
margin-left: | 40px; | 左のマージン(余白)を指定します。 |
サンプル
[headの中]
<style type="text/css"><!--
legend.sample{
margin-left: 200px;
}
fieldset {
width: 450px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-left:20px;
}
fieldset input {
width: 250px;
}
-->
</style>
[bodyの中]
<form method="post" action="sample.cgi"><fieldset>
<legend> ユーザー登録<legend>
ニックネーム:<input type="text" name="user" size="20">
パスワード:<input type="text" name="pass" size="20">
e-mail:<input type="text" name="email" size="70">
</fieldset>
<fieldset>
<legend class="sample">登録内容</legend>
お名前:<input type="text" name="name" size="20">
ご住所:<input type="text" name="address" size="70">
電話番号:<input type="text" name="tel" size="20">
</fieldset>
<div class="sample-1">
<input type="submit" value="登録する">
</div>
<div class="sample-2">
<input type="reset" value="リセット">
</div>
</form>
[ブラウザ上]