サイト内検索

...スタイルシート(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>

[ブラウザ上]

ユーザー登録
ニックネーム:

パスワード:

e-mail:
登録内容
お名前:

ご住所:

電話番号:
←サンプル(登録できません。)

Copyright c 2007.10.01 luc All rights reserved.