Ⅵ-１０ １フォームのデザインをアレンジする
１）罫線のデザインをアレンジします
入力欄の罫線のアレンジをするために、「input{～}」と「textarea{～}」を<style>に追加します。
ここでは形線の種類を「ridge」太さを「5px」色を「#c8dad8」と指定します。
input{border-style:ridge;border-width:5px;border-color:#c8dad8}
textarea{border-style:ridge;border-width:5px;border-color:#c8dad8}と書きます。【参照】
２）ボタンのデザインをアレンジします
入力欄の<input>と区別するため、クラス名を「send」と指定します。
次にinput.send{～}を<style>に追加し、罫線の種類を「outset」、背景色を「#c8dad8」と指定します。
input.send{border-style:outset;background-color:#c8dad8}と書きます。
<input type="submit">と<input type="reset">の中にはclass="send"を追加します。
<html>
<head>
<title>ご意見箱</title>
<style type="text/css"><!--
body{color:#333333;
background-color:#f0f8ff;
background-image:url(back.jpg)}
th{padding:10px}
td{padding:10px}
table{font-size:14px}
td.head1{width:125px;background-color:2f2f63}
h1{font-size:24px;color:#ffffff}
td.head2{font-size:14px;background-color:c8dad8}
table.head{width:90%;height:80px;margin-bottom:30px}
hr{width:90%;height:10px;
border-style:dotted;border-color:#32006a
border-width:2px;margin-top:20px}
a:link{color:#287c72}
a:visited{color:#3a0878}
a:hover{color:#d6d620}
a:active{color:#d6202e}
a{text-decoration:none}
form div{margin-bottom:15px}
form{margin-left:10%}
input{border-style:ridge;border-width:5px;border-color:#c8dad8}
textarea{border-style:ridge;border-width:5px;border-color:#c8dad8}
input.send{border-style:outset;background-color:#c8dad8}
--></style>
</head>
<body>
<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1"><h1>ご意見箱</h1></td>
<td class="head2">スタイルシートについて少しは参考になりましたでしょうか？
参考書【ＨＴＭＬ＆スタイルシート・・<a href="http://www.ebisu.com/">エビスコム</a>著】に基づいて書き進めて参りました。
ご意見ご感想、その他何でも気が付いたことがあれば、コメントを送って下さい。
疑問・質問には一緒に学習させて頂きます。
</td>
</tr></table>
<div align="left">
<form action="mailto:sora@free.japandesign.ne.jp"enctype="text/plain"method="post">
<div>
名前：<br>
<input type="text" name="namae" size="40"><br>
</div>
<div>
メールアドレス：<br>
<input type="text" name="mail" size="40"><br>
</div>
<div>
コメント：<br>
<textarea name="comment" cols="50" rows="8"></textarea><br>
</div>
<div>
<input type="submit"value="コメントを送る"class="send">
<input type="reset"value="リセット" class="send">
</div>
</form>
</div>
<hr>
<div><a href="index.htm">Sky&Water by sora</a>
</div>
</div>
</body>
</html>
|